A component fetches a count from a slow API and displays it. The page freezes because the effect runs in an infinite loop.
The component never settles — it keeps re-fetching endlessly, the count flickers or the browser tab becomes unresponsive.
Think about what's in the dependency array and what happens after the effect runs.
Think about what's in the dependency array and what happens after the effect runs.
Why this fixes it
The effect read count from its closure and called setCount(next), which updated count, which was listed as a dependency, which caused the effect to re-run — a render loop with no exit condition. Two changes break the cycle: the dependency array is changed to [] so the effect runs only on mount, and setCount(prev => prev + 1) replaces the closure-based read so the increment does not need to capture count at all. The functional updater receives the most recent state from React internally, making the stale closure irrelevant and the effect safe to run exactly once.