A live ticker displays a number that should increment every second automatically from the moment the component mounts
The ticker reaches 1 after the first second and then freezes. It never increments past 1 no matter how long you wait.
The callback passed to setInterval captures variables at the time it is created - what value does it always see?
The callback passed to setInterval captures variables at the time it is created - what value does it always see?
Why this fixes it
The interval callback closed over count at the time the effect ran - with [] deps the effect ran once on mount, permanently capturing count at 0. Every tick called setCount(0 + 1) which is always 1. After the first tick count was already 1, so React's equality check saw the same value and stopped re-rendering - the counter froze at 1. Replacing with setCount((c) => c + 1) uses a functional updater that receives the actual current state from React's queue on each tick. Each call correctly increments from whatever count is now, not from the stale 0 captured at mount.