Build a Stopwatch

Question

Build a Stopwatch

Accepted Answer

## Building a Stopwatch in React

**Mental model:** Don't accumulate time by adding a fixed amount each tick — that drifts. Instead store a *start timestamp* and, on every frame, compute `elapsed = now - start`. State holds the elapsed milliseconds; a `ref` holds the start time and the animation handle so they survive re-renders without causing them.

### Step 1 — Separate state from refs
`elapsed` is rendered, so it's state. The start time and the rAF id are plumbing, so they're refs.

```jsx
const [elapsed, setElapsed] = useState(0);
const startRef = useRef(0);
const rafRef = useRef(null);
```

### Step 2 — Tick from a timestamp
On start, anchor `start = now - elapsed` so resuming continues from where you paused.

```jsx
const tick = () => {
  setElapsed(Date.now() - startRef.current);
  rafRef.current = requestAnimationFrame(tick);
};
const start = () => {
  startRef.current = Date.now() - elapsed;
  rafRef.current = requestAnimationFrame(tick);
};
```

### Step 3 — Stop, reset, lap

Build a Stopwatch

Understand the problem

Attempt it yourself

Stuck? AI Nudge Available

Study the solution

The solution is waiting

React solution

Join the discussion

Discussion (0)