A stopwatch counts up every second. Each time you click Reset the counter resets but the speed doubles - after three resets it ticks four times per second.
Click Reset once - the counter ticks normally but jumps by 2 every second. Click again - jumps by 3. The interval stacks with each reset.
What happens to the previous interval when the effect runs again?
What happens to the previous interval when the effect runs again?
Why this fixes it
The effect started a new setInterval every time running flipped back to true but returned nothing, so React had no cleanup instruction and left every previous interval running alongside the new one - each Reset call added another tick to the pile. Adding return () => clearInterval(id) gives React a teardown function it calls before re-running the effect, which cancels the old interval before a new one is registered. This ensures exactly one interval is alive at any point, keeping the increment rate constant at one per second regardless of how many resets have occurred.