A counter ticks up every second. It should start from 0 and increment by 1 each second indefinitely. The counter displays 0 and never moves.
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, before it ever had a chance to tick. 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. With the interval no longer cancelled at creation time, it ticks freely every second and the counter increments as expected.