Which of the following is a preferrable way to send a GET request in react?Aconst App = () => {const fetchHandler = () => { fetch('randomapi').then(res => {console.log(res)}) }fetchHandler();return <div></div>}Bconst fetchHandler = () => { fetch('randomapi').then(res => {console.log(res)}) }const App = () => {fetchHandler();return <div></div>}Cconst App = () => {useEffect(() => {const fetchHandler = () => { fetch('randomapi').then(res => {console.log(res)}) }fetchHandler();}, []);return <div></div>}DNone of the above
Question
Which of the following is a preferrable way to send a GET request in react?Aconst App = () => {const fetchHandler = () => { fetch('randomapi').then(res => {console.log(res)}) }fetchHandler();return <div></div>}Bconst fetchHandler = () => { fetch('randomapi').then(res => {console.log(res)}) }const App = () => {fetchHandler();return <div></div>}Cconst App = () => {useEffect(() => {const fetchHandler = () => { fetch('randomapi').then(res => {console.log(res)}) }fetchHandler();}, []);return <div></div>}DNone of the above
Solution
The preferable way to send a GET request in React is option C.
This is because useEffect is a hook in React that allows you to perform side effects in function components. Side effects could be data fetching, subscriptions, or manually changing the DOM.
In this case, the GET request is a side effect. By placing the fetchHandler function inside the useEffect hook, you ensure that the GET request is made after the component is mounted to the DOM.
The empty array [] as a second argument to useEffect means that the effect will run once after the initial render of the component, similar to componentDidMount in class components.
Option A and B might lead to issues because the fetchHandler function is called during the rendering phase of the component, which is not recommended.
Option D is incorrect because one of the options is correct.
Similar Questions
Which of the following is an appropriate way of sending POST request in react and printing the response on console?Aconst App = () => {const [body, setBody] = useState([]);const postHandler = () => { fetch('http://api.com', {method: 'POST', body: body}) .then(res => console.log(res))}return <button onClick={postHandler}> Click</button>}Bconst App = () => {const [body, setBody] = useState([]);const postHandler = () => { fetch('http://api.com') .then(res => console.log(res))}return <button onClick={postHandler}> Click</button>}Cconst App = () => {const [body, setBody] = useState([]);const postHandler = () => { fetch('http://api.com') .then( console.log(res))}return <button onClick={postHandler}> Click</button>}DNone of the above
What is the recommended way to make HTTP requests in a React application?Using the built-in `fetch` functionImporting jQuery for AJAX requestsWriting custom XMLHttpRequest codeUsing third-party libraries not related to React
fetch() returns a Promise that resolves to the Response to that request, whether it is successful or not.
const handleSubmit = (e) => { e.preventDefault(); const userData = { username, email, password }; fetch('http://localhost:8080/signup', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(userData), }) .then((response) => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then((data) => { console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); }); };
Which method is used to define a route that handles GET requests in Express?app.get()app.fetch()app.retrieve()app.query()
Upgrade your grade with Knowee
Get personalized homework help. Review tough concepts in more detail, or go deeper into your topic by exploring other relevant questions.