Object.is decides what "changed" means
A re-render that keeps the same user object skips the effect. A copy with identical contents is a new reference, so the effect runs again even though nothing visible changed.
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
Object.is(3, 3): true
Object.is("a", "a"): true
Object.is({}, {}): false
Object.is(NaN, NaN): true
effect: user is Asha
--- re-render, same user object
--- new object with the same contents
effect: user is Asha