Why dependencies exist
An effect closes over the variables it uses, capturing their values from that render. The dependency array tells the framework which captured values to watch so it can rerun the effect when they change. Get the list wrong and the effect reads stale data or fires too often.
- A missing dependency causes a stale closure reading old values.
- An unstable dependency causes the effect to rerun every render.
- An empty array freezes the captured values forever.
Common traps
Objects and functions created during render are new each time, so listing them retriggers the effect endlessly. Wrap them so their identity stays stable, or move them inside the effect. A linter rule can flag missing entries.
- Memoize functions and objects before depending on them.
- Move logic inside the effect to shrink the dependency list.
- Trust the lint rule rather than silencing it blindly.
The goal is a list that exactly mirrors what the effect actually reads.
Key idea
List every value the effect reads in its dependency array, and stabilize objects and functions so the effect neither goes stale nor loops.