Countdown TimerLoading saved progress…

Countdown Timer

Build a countdown timer as a single React component. It starts at 01:00 and ticks down once per second, with Start, Pause, and Reset controls. The interesting part isn't the display — it's owning a setInterval correctly: not stacking two of them, pausing without losing the value, and clearing it when the component unmounts.

Task

The starter App.tsx renders the timer in its resting state (01:00 and the three buttons) with no logic. Make it work:

  1. Hold the time. Track seconds with useState(60) and show format(seconds) as mm:ss.
  2. Start ticking. start() runs a setInterval that decrements seconds every 1000ms and stops at 0. Starting twice must not double-tick.
  3. Pause and reset. pause() clears the interval but keeps seconds; reset() clears it and returns to 60.
  4. Clean up. Clear the interval when the component unmounts so it never fires against a gone component.

Examples

  • The page loads showing 01:00. Clicking Start counts down: 00:59, 00:58, … Clicking Start again does nothing extra — still one tick per second.
  • Clicking Pause freezes the display; Start resumes from there. Reset jumps back to 01:00 and stops.
  • Left to run, it stops on its own at 00:00.

Notes

  • The interval id is not state. Keep it in a useRef — it's a handle you read and clear, and changing it should not trigger a re-render. seconds is the state; the id is the handle.
  • Guard against stacking. If a timer is already running, start() should return early. Two intervals means two decrements per second.
  • format is provided. The mm:ss helper (pad to two digits) is already in the starter; focus on the timer lifecycle.
Loading editor…
Loading preview…