No array, empty array, and [count]
All three run after the first render. Changing count re-runs the first and third. Changing text re-runs only the one with no array. Click the buttons yourself to see more.
The dependency array tells React which values an effect reads, so it can skip re-running the effect when none of them changed; React compares each one with Object.is, which is why new objects and functions made during render re-run the effect every time.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
This effect re-runs after every render. Fix it without disabling the linter:
``jsx
function Room({ roomId }) {
const config = { roomId, retries: 3 };
useEffect(() => {
console.log("connect", config.roomId, config.retries);
}, [config]);
return null;
}
Make this ticker's dependency array honest and empty: useEffect(() => { const id = setInterval(() => setCount(count + 1), 1000); return () => clearInterval(id); }, [count]);
Explain it without notes
Explain the three forms of the dependency array and when the effect runs for each.
How does React decide whether a dependency changed? What consequences does that have for objects and functions?
What is a reactive value? Which values don't need to be dependencies?
The linter asks you to add a dependency, but adding it makes the effect re-run too often. What do you do?
Preview
Console
Nothing logged yet.Expected console output
no array: runs after every render
[]: runs once, after the first render
[count]: count is 0
--- click count
no array: runs after every render
[count]: count is 1
--- click text
no array: runs after every render