Lesson 24 — useInterval hook

Timers without stale values

A stale closure happens when a function keeps seeing old values: the interval was set up with the first render's callback, so it reads n = 0 forever. The fix is a ref — useRef gives a box (ref.current) that survives re-renders without causing them. Save the newest callback into the ref on every render, and let the interval always call ref.current.

const latest = useRef(fn);
latest.current = fn; // updated every render

Why it matters: this pattern (popularised as useInterval) fixes a whole family of "my timer is stuck" bugs.