UseEffect being called multiple times
Solution 1
Your useEffect
is executed only once per render cycle, but you have several state updates in your useEffect
which cause a re-render. Hence you get a lot of alerts.
See a demo of your code and see the console.logs as well as comments
Also note that useEffect will
- when you provide empty array dependency, your useEffect execute once
- when you some value as dependency (eg:
[name]
), your useEffect execute when name state/prop changes - useEffect executes on every re-render if you don't pass the dependency array.
Solution 2
refactor it like this.
import React, { useEffect, useState } from "react";
//import "./App.css";
const DemoFetchZ = () => {
const [todo, setTodo] = useState({});
const [loading, setLoading] = useState(false);
useEffect(() => {
fetchData();
}, []);
const fetchData = () => {
setLoading(true);
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((data) => {
setTodo(data);
setLoading(false);
})
.catch((error) => {
console.log(error);
setLoading(false);
});
};
return (
<>
{loading ? (
<div>...Data Loading.....</div>
) : (
<div>
- Fetch
<br />
<span>Title: {todo ? todo.title : "no Title Found"}</span>
</div>
)}
</>
);
};
export default DemoFetchZ;
Related videos on Youtube
nktoronto
Updated on March 15, 2022Comments
-
nktoronto over 2 years
I thought
useEffect
is called once only after render, but it's being executed multiple times and not in the order I expected.I expected it to msg 'data loading' while the fetch is in progress and then once fetch is done, render the title field and alert "..Done..." once and that should be the end.
I added ALERT and console logs at the two points to determine the flow and both alerts and console logs appear more than once and in different orders. Could you kindly run this code and see the behaviour. I kept the 2nd argument array as null to make it run once only but does not help.
Please clarify if react RENDER means DISPLAY on screen? what stage does LOAD indicate? When is the display done?
code follows:
import React, { useEffect, useState } from "react"; //import "./App.css"; function DemoFetchZ() { let data = { title: "Waiting for Data" }; const [todo, setTodo] = useState(data); const [isData, setData] = useState(false); const [isFetching, setFetching] = useState(false); useEffect(() => { // called after the first render async function fetchData() { setFetching(true); const response = await fetch( "https://jsonplaceholder.typicode.com/todos/1" ); console.log("response = ", response); let data = await response.json(); setTodo(data); //updt state setFetching(false); setData(true) console.log("Data = ", data); } fetchData(); }, []); //[isData] null value will execute once only? if (isFetching) { console.log("data loading ......") alert ("data loading") return (<div>...Data Loading.....</div>); } return ( <div> - Fetch <br /> {alert("..DONE...")} <span>Title: {todo.title}</span> </div> ); } export default DemoFetchZ;
-
nktoronto almost 4 yearsThat looks much better. I am going to try it. One question though. Why not have function fetchData as asynch-await?? const fetchData = () => { setLoading(true); fetch("jsonplaceholder.typicode.com/todos/1") .then((response) => response.json()) ..
-
Seraj Vahdati almost 4 years.then is working just like async-await and it's better for DX. in the above code you told the compiler just set data when the response is 200 otherwise set error. but in your code you don't handle the errors.
-
Junaid over 2 years@SerajVahdati I am learning react.js and have faced somewhat a similar problem. What I understand from this answer is that the state objects like
todo
andloading
should not be updated inside theuseEffect
method if it is passed as a dependency, otherwiseuseEffect
will be called again and again. In my case, I am fetching data from an API and displaying it on the same page. By applying code fix as mentioned in this answer, I have a warning: "React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array." -
Seraj Vahdati over 2 years@Junaid it's just a warn and it's not important. nothing is wrong with this code. but if you want to fix it. you can declare your
fetchData
function inside theuseEffect
and call it right after the declaration. it's had to be fixed for you -
Dev Null over 2 yearsOne small improvement. If you end up putting dependencies in
useEffect
, putting a check to see if you already have your data in fetchData() and return instead of calling the server again will stop you from spamming the server with the same request when not needed.fetchData(){ if ( data ) { return; } setLoading(true);....}