Trap 1: the interval that sticks at 1, and the fix
Both intervals tick five times. The stale one sets 0 + 1 five times; the fixed one adds one to the latest value each time.
Most hooks bugs come from three mistakes: a function that keeps reading values from an old render (a stale closure), an effect whose dependencies change every render (an effect loop), and an effect that sets something up without cleaning it up; each has a reliable fix.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Fix this so the countdown reaches 0: useEffect(() => { const id = setInterval(() => setLeft(left - 1), 1000); return () => clearInterval(id); }, []);
This effect loops. Fix it without disabling the lint rule: const filters = { tag }; useEffect(() => { setRows(applyFilters(all, filters)); }, [filters]);
Add the missing cleanup: useEffect(() => { document.addEventListener("keydown", onKey); }, [onKey]);
Explain it without notes
What is a stale closure in React? Give an example and three ways to fix it.
Why does an object in the dependency array cause an effect to run every render?
What does a missing effect cleanup cause, and how does StrictMode help you find it?
When would you use useEffectEvent instead of adding a value to the dependency array?
Preview
Console
Nothing logged yet.Expected console output
Stale: 1
Fixed: 5