React useEffect Dependencies — The Bug That Keeps Coming Back

useEffect looks simple. Add a function, add a dependency array, done.

Then production hits you with:

• a timer that logs the wrong count
• a fetch that sends a stale token
• an effect that runs forever
• or React Strict Mode making everything run twice

These are not random React bugs. They all come from one idea:

Every render is a snapshot. Your effect remembers the values from the render that scheduled it.

Once you internalize that sentence, most useEffect pain disappears.

🧠 The Core Mental Model

When React renders your component, it creates a snapshot of props and state for that moment.

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count); // 👈 frozen at the count from THIS render
    }, 1000);
    return () => clearInterval(id);
  }, []); // empty deps = only first render's count

  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

You click the button → UI shows 1, 2, 3…
But the interval still logs 0 forever.

Why? The callback inside setInterval is a closure. It captured count = 0 from the first render and never saw updates.

This is the famous stale closure problem — the #1 useEffect interview trap.

❌ Mistake 1: Empty [] When You Need Fresh Values

useEffect(() => {
  fetch(`/api/user/${userId}`); // userId from first render only
}, []);

Looks clean. Breaks when userId changes via routing or props.

✅ Fix

useEffect(() => {
  fetch(`/api/user/${userId}`);
}, [userId]); // re-run when userId changes

Rule: If your effect reads a value from the component, that value probably belongs in the dependency array.

❌ Mistake 2: Missing Dependencies (Ignoring ESLint)

useEffect(() => {
  document.title = `Count: ${count}`;
}); // no deps → runs after EVERY render

Without deps, the effect runs on every render — often causing extra work or infinite loops if the effect also sets state.

✅ Fix

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

Trust eslint-plugin-react-hooks. When it says "missing dependency", it is usually right.

❌ Mistake 3: Objects & Arrays in Deps → Infinite Loop

useEffect(() => {
  loadData({ page, filter });
}, [{ page, filter }]); // ❌ new object every render → effect → render → ...

In JavaScript, { page, filter } !== { page, filter }. A fresh object every render means React thinks deps changed every time.

✅ Fix options

A) List primitives directly

useEffect(() => {
  loadData({ page, filter });
}, [page, filter]);

B) Memoize the object

const params = useMemo(() => ({ page, filter }), [page, filter]);

useEffect(() => {
  loadData(params);
}, [params]);

Rule: Dependencies are compared with Object.is (like ===). New references every render = infinite loop.

❌ Mistake 4: Functions in Deps Without useCallback

function Search() {
  const [q, setQ] = useState("");

  const search = () => fetch(`/api?q=${q}`);

  useEffect(() => {
    search();
  }, [search]); // search is recreated every render → loop
}

Every render creates a new search function → deps change → effect runs → state update → render → repeat.

✅ Fix: define inside the effect

useEffect(() => {
  const search = () => fetch(`/api?q=${q}`);
  search();
}, [q]);

Or wrap with useCallback if the function is passed to children:

const search = useCallback(() => {
  fetch(`/api?q=${q}`);
}, [q]);

Prefer moving logic inside the effect when nothing else needs that function.

❌ Mistake 5: Fetch Race Conditions

useEffect(() => {
  fetch(`/api?q=${query}`)
    .then(r => r.json())
    .then(setResults);
}, [query]);

User types fast → request for "a" finishes after "abc". UI shows wrong data.

✅ Fix: cleanup + ignore flag

useEffect(() => {
  let cancelled = false;

  fetch(`/api?q=${query}`)
    .then(r => r.json())
    .then(data => {
      if (!cancelled) setResults(data);
    });

  return () => { cancelled = true; };
}, [query]);

Or use AbortController (see AbortController guide).

Rule: If an effect starts async work, clean it up on re-run or unmount.

🔄 When You Need the Latest Value Without Re-running

Sometimes you want a stable interval/subscription but still read fresh state:

const countRef = useRef(count);
countRef.current = count; // always latest, no extra effect runs

useEffect(() => {
  const id = setInterval(() => {
    console.log(countRef.current); // ✅ always fresh
  }, 1000);
  return () => clearInterval(id);
}, []); // stable setup, fresh reads

Use useRef when you need latest value but don't want the effect to re-subscribe on every change.

Related: useRef vs useState.

🧪 Why Strict Mode Runs Effects Twice (Dev Only)

In React 18+ dev mode, Strict Mode mounts → unmounts → remounts components to expose missing cleanups.

You might see:

• double fetch in Network tab
• double console.log on mount

This is intentional. It catches bugs like:

useEffect(() => {
  socket.connect();
  // ❌ no cleanup → duplicate connections in prod navigations too
}, []);

✅ Always return cleanup

useEffect(() => {
  socket.connect();
  return () => socket.disconnect();
}, []);

Production does not double-invoke. Dev pain saves prod bugs.

🎯 Interview Cheat Sheet

✅ The 4 Rules to Remember

1. Every value you read inside the effect should be in deps — unless you have a deliberate reason not to.
2. Never put freshly created objects/functions in deps — use primitives, memoization, or inline them.
3. Always clean up — timers, listeners, fetches, subscriptions.
4. Stale closure? Either add the value to deps, or store it in a ref if re-running is too expensive.

✨ Final Takeaway

useEffect doesn't watch live variables — it remembers the snapshot from when it was scheduled.

Write that on a sticky note. Next time a timer logs 0, a fetch sends an old token, or an effect loops forever — you'll know exactly where to look.

Suggested follow-ups

• JavaScript Closures — the underlying mechanism
• useRef vs useState — when refs beat state in effects
• AbortController — cancel fetches on unmount