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;
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.
Passing no dependencies in a dependency array If your useEffect function does not contain any dependencies, an infinite loop will occur.
If you have just made a new project using Create React App or updated to React version 18, you will notice that the useEffect hook is called twice in development mode. This is the case whether you used Create React App or upgraded to React version 18.
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
[name]
), your useEffect execute when name state/prop changesRead here on re-render
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With