How does the dependency array work and what happens if you omit a dependency?
Quick answer
React re-runs the effect when any listed dependency changes. Omitting a value the effect reads causes stale closures — the effect keeps seeing old props/state.
In detail
Every reactive value (prop, state, or function from the component) used inside the effect must be in the array. If you leave one out to 'run once', the effect captures the value from the render it was created in and never sees updates — a stale closure bug. Fix the root cause (use functional updaters, move functions inside, or memoize them) rather than disabling the exhaustive-deps lint rule.
1// ❌ uses count but omits it -> always sees the initial count
2useEffect(() => {
3 const id = setInterval(() => setCount(count + 1), 1000);
4 return () => clearInterval(id);
5}, []);
6// ✅ functional updater removes the dependency
7useEffect(() => {
8 const id = setInterval(() => setCount(c => c + 1), 1000);
9 return () => clearInterval(id);
10}, []);⚠️Don't lie
Don't silence exhaustive-deps. Fix why the dependency is there.
Why interviewers ask this: Stale closures are a top source of real React bugs.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399