Which of the following is an example of using the useEffect() hook to build a loader in a React component?AuseEffect(() => { setLoading(true); fetch('https://example.com/data') .then(res => res.json()) .then(data => { setData(data); setLoading(false); });}, []);BuseEffect(() => { setIsLoading(true); fetch('https://example.com/data') .then(res => res.json()) .then(data => { setData(data); setIsLoading(false); });}, []);CuseEffect(() => { setIsLoaded(false); fetch('https://example.com/data') .then(res => res.json()) .then(data => { setData(data); setIsLoaded(true); });}, []);DuseEffect(() => { setLoading(true); fetch('https://example.com/data') .then(res => res.json()) .then(data => { setData(data); setLoading(false); });}, [data]);
Question
Which of the following is an example of using the useEffect() hook to build a loader in a React component?AuseEffect(() => { setLoading(true); fetch('https://example.com/data') .then(res => res.json()) .then(data => { setData(data); setLoading(false); });}, []);BuseEffect(() => { setIsLoading(true); fetch('https://example.com/data') .then(res => res.json()) .then(data => { setData(data); setIsLoading(false); });}, []);CuseEffect(() => { setIsLoaded(false); fetch('https://example.com/data') .then(res => res.json()) .then(data => { setData(data); setIsLoaded(true); });}, []);DuseEffect(() => { setLoading(true); fetch('https://example.com/data') .then(res => res.json()) .then(data => { setData(data); setLoading(false); });}, [data]);
Solution
The correct answer is B.
In this example, the useEffect() hook is used to perform a side effect - fetching data from a URL. The setIsLoading state function is called before and after the fetch to indicate that the data is being loaded.
Here's a step-by-step breakdown:
-
The useEffect hook is called with a function and an empty dependency array. The empty array means this effect will only run once, similar to componentDidMount in a class component.
-
Inside the function, setIsLoading(true) is called to set the loading state to true. This could trigger a loading spinner in the UI.
-
The fetch function is called with a URL to get data. This returns a promise.
-
The .then() method is used to handle the response from the fetch. The response is converted to JSON with res.json().
-
Another .then() is used to handle the resulting data. The data is saved to state with setData(data), and setIsLoading(false) is called to indicate that the data has finished loading.
-
If there was an error at any point in this process, it would be caught and handled by a .catch() method (not shown in this example).
Similar Questions
What is the syntax for the useEffect() hook in React, when you want to run a function inside the useEffect only when the app loads?AuseEffect(() => {}, []);BuseEffect(() => {}, [stateVariable]);CuseEffect(() => {});DAll of the above
What is the purpose of the useEffect hook in React? a. To manage component state b. To create reusable logic in functional components c. To define the initial state of a component d. To handle side effects in functional components
Which of the following is a valid way to use theuseEffect()hook to fetch data from an API?AuseEffect(() => { const fetchData = async () => { const response = await fetch('https://api.example.com'); const data = await response.json(); setData(data); }; fetchData();}, []);BuseEffect(() => { fetch('https://api.example.com') .then(response => response.json()) .then(data => setData(data));}, []);CBoth a and bDNeither a nor b
How to call the loading function with React useEffect hook only once?
What does the useEffect hook do without a dependency array?
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.