I have the following code snippet in use while wrapping my whole React application with <React.StrictMode>.
function Quiz() {
const fetchData = useCallback(
async () => {
console.log("hiho");
},
[]
);
useEffect(() => {
fetchData();
}, [fetchData])
return (
<>
</>
)
}
For the initial load of my application fetchData is being called twice within my useEffect(). I am a bit puzzled as I assumed that useCallback() would prevent this (even though StrictMode calls the rendering twice).
Should I be worried that fetchData get's called twice? In my case fetchData returns random data which then has the side effect that the data changes during the render process on dev.
Try removing the fetchData from the useEffect dependency array. I believe that should render it just once.
function Quiz() {
const fetchData = useCallback(
async () => {
console.log("hiho");
},
[]
);
useEffect(() => {
fetchData();
}, [])
return (
<>
</>
)
}