Build a stopwatch with start, pause, reset, and millisecond precision

The trap: the obvious "increment a counter every 10ms" implementation drifts (setInterval is not precise) and bloats state. The right architecture is timestamp-based: store when the stopwatch started and how much time was already accumulated; compute the display value from Date.now() on each render.

Why timestamp, not tick counting.

setInterval(fn, 10) is not guaranteed to fire every 10ms. Background tabs throttle it to 1Hz, slow frames delay it, and incrementing elapsed += 10 accumulates drift. With timestamps, you read the wall clock — drift-free.

State shape.

type State =
  | { running: false; elapsedMs: number }            // paused or initial
  | { running: true; startedAt: number; baseMs: number }; // baseMs = elapsed before this run

When running, elapsed = baseMs + (Date.now() - startedAt). Pause folds the running delta into baseMs and switches to paused. Reset zeros everything.

Re-render driver. A separate effect schedules requestAnimationFrame while running is true. Each frame calls forceUpdate (or sets a now state). The display formats elapsed() from current state + now. requestAnimationFrame is preferred over setInterval(_, 16) because it pauses when the tab is hidden (no wasted work) and aligns with paint.

Format helper. Convert ms to mm:ss.cc (centiseconds) or hh:mm:ss.mmm. Use String(n).padStart(2, "0").

Cleanup. The rAF effect must cancel its scheduled frame on dependency change / unmount, otherwise paused stopwatches keep firing rAF callbacks (cheap, but wasteful).

Variants interviewers ask for.

• Lap times. Each "Lap" press snapshots current elapsed into a list. Show diff from previous lap.
• Countdown timer. Same model in reverse: remaining = totalMs - elapsed(). Stop and fire onComplete when ≤ 0.
• Multiple stopwatches. Hoist the model into a custom hook useStopwatch() so each instance is independent.

Avoid these. (1) Storing the displayed time in state and incrementing it — drift + unnecessary renders. (2) Forgetting to cancel rAF on pause — battery drain. (3) Recreating the stopwatch object on every render — pause/start lose state. (4) Using Date.now() in the dependency array — infinite loop.