How does the useEffect dependency array work, and what tends to go wrong with it?

React compares each dependency with its value from the previous render using Object.is and re-runs the effect only if one changed. An empty array means run once after mount; omitting the array means run after every render. It goes wrong when you leave a dependency out and capture a stale value, or when you include an object or function recreated every render, which makes the effect loop forever.

React keeps the array from the last render and compares each item with Object.is. If everything matches it skips the effect; if anything differs it runs the cleanup for the old one and then the new one. The catch is that the effect closes over the props and state from the render that created it, so if I leave something out of the array I get a stale value that quietly goes out of date. The other side of it is putting an object or an arrow function in there, because those are new references every render, so the effect runs on a loop. My usual fixes are functional state updates so I do not need the current value as a dependency, hoisting constants out of the component, and only wrapping a callback when it genuinely has to be a dependency. Honestly though, the first question I ask is whether the effect should exist. Most effects I have deleted were computing derived state, which is just a calculation during render, or fetching data that belonged in the router or a query library instead.