Debugging — Beginner React challenge.
This counter is supposed to auto-increment by 1 every second while it's running — but it gets stuck at 1 and never climbs any further. This is a debugging challenge: the code already runs, find the stale closure bug and fix it, rather than building the feature from scratch.
Requirements
- While running is true, the count must increase by 1 every 1000ms, indefinitely — not just once.
- Clicking Stop freezes the count at its current, correct value.
- Clicking Start again after a Stop must resume counting upward from wherever it left off, not from 0 and not stuck.
- Start is disabled while running; Stop is disabled while idle.
Signature
function AutoCounter(): JSX.Element
Example
<AutoCounter />
// click "Start Auto", wait 3 seconds
// buggy: count shows 1 (frozen after the first tick)
// fixed: count shows 3 (and keeps climbing every second)
Constraints
- Do not remove the useEffect or change its dependency array — the fix is inside the interval callback.
- Do not switch to setTimeout or a ref-based counter — keep using setInterval + setCount.