Build a Stopwatch | Interview Question

Q: Build a Stopwatch

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; timestamps, intervals and effect cleanup are explained from zero. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution on React 19.3.1 inside <StrictMode> in jsdom. ## 1. Why This Even Matters — A Story First Imagine timing a friend's run with a paper notebook. You could make a pencil mark every second and count the marks at the end. If you sneeze and miss three marks, your friend just got three seconds faster. Or you could write down the time on the big station clock when they start, and again when they finish, and subtract. Sneezing changes nothing. A browser timer is the sneezy pencil. setInterval(fn, 10) promises "no sooner than 10 ms", not "exactly 10 ms"

The problem

Question presented to candidate: "Build a stopwatch. It shows minutes, seconds and hundredths, has Start, Pause, Resume and Reset, and a Lap button that records split times in a list. It has to stay accurate: if I run it for ten minutes and pause and resume a few times, it should match a real stopwatch."

Requirements:

Display mm:ss.cc (minutes, seconds, centiseconds).
One primary button that reads Start, then Pause while running, then Resume while paused.
Lap (only while running) adds a row with the lap number, the split for that lap and the running total.
Reset (when there is anything to reset) clears the time and the laps.
Accurate across pauses and when the page is busy; no timers left running.

What a strong answer should cover:

Accuracy from timestamps, not tick counts: elapsed = banked + (now - startedAt), where banked holds time from earlier runs.
performance.now() (monotonic) rather than Date.now() for measuring durations.
The redraw timer only triggers re-renders; its interval (here 25 ms) has nothing to do with accuracy.
Pausing banks the current run; resuming only sets a new startedAt.
Laps stored as cumulative totals, with splits derived as differences.
Interval cleanup, and avoiding stale closures in the tick callback.
Accessibility: role="timer" (not announced every 25 ms), real buttons with disabled states, a polite live region for laps.

Clarifying questions expected:

"What precision do you want displayed: tenths, hundredths or milliseconds?"
"Should laps highlight the fastest and slowest?"
"Does it need to survive a page reload?"

Code / implementation expected: Yes. A working stopwatch with the timestamp model, pause/resume, laps, reset and cleanup.

React
Timers
State

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; timestamps, intervals and effect cleanup are explained from zero. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution on React 19.3.1 inside <StrictMode> in jsdom.

1. Why This Even Matters — A Story First

Imagine timing a friend's run with a paper notebook. You could make a pencil mark every second and count the marks at the end. If you sneeze and miss three marks, your friend just got three seconds faster. Or you could write down the time on the big station clock when they start, and again when they finish, and subtract. Sneezing changes nothing.

A browser timer is the sneezy pencil. setInterval

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import Stopwatch from "./src/components/Stopwatch";

export default function App() {
  return (
    <main className="page">
      <Stopwatch />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.