A live ticker displays a number that should increment every second automatically from the moment the component mounts.
The ticker shows 0 and never moves. It stays at 0 forever even after waiting several seconds. The interval appears to be running but the displayed value never changes
The callback passed to setInterval runs later — which version of count does it see?
The callback passed to setInterval runs later — which version of count does it see?
Why this fixes it
The interval callback closed over count at the time the effect ran — with an empty dependency array the effect ran once on mount, capturing count at 0. Every subsequent tick called setCount(0 + 1), which set count to 1, but React's Object.is check compared the new value 1 against the current rendered value — and after the first tick, it was already 1, so React bailed out. Actually the deeper issue is that the closure always reads 0, so every call is setCount(1) — setting the same value repeatedly. Replacing with setCount((c) => c + 1) uses a functional updater that receives the actual current state from React's queue rather than the stale closure value, so each tick correctly increments from whatever the current count is.