21 / 23

Write a useInterval hook that always calls the latest callback.

MediumP3Coding

Write a useInterval(callback, delay) hook that calls callback every delay milliseconds, as setInterval would, but that works correctly with React state.

Build a demo: a counter that increments every second, with controls to pause and to change the delay. The callback reads the current state, so a stale closure shows up as a counter stuck at 1.

Time box: 20 to 30 minutes.

Requirements

0 / 6

Calls the callback repeatedly at delay ms until unmounted
The callback always sees the latest props and state, without restarting the interval on every render
The interval is restarted only when delay changes
delay of null pauses the interval; switching back to a number resumes it
The interval is cleared on unmount and before each restart (no leaked timers)
The demo counter increases by one per tick even though the callback uses the current value of count

Stretch goals

0 / 3

Only after every requirement works.

Return { pause, resume } controls instead of requiring delay to be null
Add an immediate option that runs the callback once on mount
Explain why useEffect(() => { setInterval(() => setCount(count + 1)) }, []) is wrong and give two fixes

Hints

Workspace

Your files are saved in this browser as you type.

When every requirement works, mark it complete to count it as solved.

Solution notes

How a strong candidate structures it, and what interviewers check.

Your notesSaved automatically