Effect Dependencies & Stale Closures

The dependency array describes reactive values used by the effect. If an effect reads a prop or state value, that value generally belongs in its dependency list unless the design intentionally uses another mechanism.

A stale closure occurs when a callback retains values from an older render. This commonly appears with timers, subscriptions, or asynchronous callbacks. The solution is not always to add an empty dependency array. Instead, decide what the effect should synchronize and ensure the callback sees the intended values.

The exhaustive-deps lint rule is useful because missing dependencies often indicate a design problem. When satisfying it causes a loop, reconsider the effect rather than suppressing the warning blindly.

Empty dependency arrays are not a lifecycle command

[] means the effect does not depend on reactive values from the component. It should not be used as a general-purpose 'run once' escape hatch.

Key Takeaways
  • Dependencies describe reactive inputs to an effect.
  • Stale closures are often symptoms of unclear synchronization design.
  • Avoid suppressing dependency warnings without understanding the lifecycle.