I have a very simple component that fetches data and do some easy computation. Every time the page refreshes the component renders, the value will change. I have also tried clearing the cache thinking it might be an issue but it didn't solve the problem. Thank you for your help!
I have tried removing and I get a warning with a message suggesting to add difference but even without it, it still behaves the same on every single render. I use difference value like this
I have put the code on Sandbox to make easier to debug. Same problem still occurs on every other page refresh.
https://codesandbox.io/s/agitated-cdn-q3gju?file=/src/Card.js
Each state change generates the component rendering. You are listening to the "difference" variable change and changing it again with setDifference, creating a loop.
This
useEffect(()=>{
setState(something)
},[state])
Use
useEffect(()=>{
setState(something)
},[])