A counter ticks up by one every second, starting from zero as soon as the component mounts.
The counter is stuck at 0 forever. It never starts ticking. The component renders without error but the interval appears to have no effect.
Look carefully at the return statement inside useEffect - is the cleanup a function that will be called later, or is something being called right now?
Look carefully at the return statement inside useEffect - is the cleanup a function that will be called later, or is something being called right now?
Why this fixes it
`return clearInterval(id)` called `clearInterval` immediately and returned its result - `undefined` - rather than returning a function for React to call later; this meant the interval was cancelled in the same synchronous pass it was created. Wrapping it as `return () => clearInterval(id)` defers the call: React holds onto the function and only invokes it when the component unmounts or before the effect re-runs.