The Problem
If you have been working with React for any length of time, you have probably seen this warning pop up in your console: React Hook useEffect has a missing dependency: xyz. Either include it or remove the dependency array.
This warning from ESLint has confused countless developers. Let us break down what is really happening and how to fix it properly.
Common Mistakes
1. The Infinite Loop
A worse mistake is adding an object or array to the dependency array without proper handling. This happens because options is a new object on every render, causing the effect to run again, which changes options, which runs the effect again.
2. Forgetting Functions
Forgetting to include callback functions is equally problematic. Functions defined inside components are recreated on every render, triggering the effect repeatedly.
The Solutions
Solution 1: Add the Dependency
The simplest fix is often to add the dependency directly to the array.
Solution 2: Use useCallback
Wrap your functions with useCallback to stabilize references and prevent unnecessary re-renders.
Solution 3: Use useRef for Stable Values
Sometimes you need a value that does not trigger re-renders. useRef provides a stable reference that persists across renders.
Solution 4: The Empty Array with Care
Sometimes you genuinely want an effect to run only once. Just make sure you understand what once means in the React lifecycle.
React 19 Improvements
React 19 makes this easier with the new compiler (formerly React Forget). The compiler automatically optimizes dependency arrays, reducing the need for manual useCallback and useMemo. However, understanding these patterns remains essential for debugging and maintaining older codebases.
Best Practices for 2026
- Listen to ESLint - It catches real bugs
- Use the exhaustive-deps rule - Enable eslint-plugin-react-hooks/exhaustive-deps
- Prefer stable references - Use useCallback for functions in dependencies
- Understand closure - Know how closures work in JavaScript
- Test thoroughly - Effects are notorious for tricky bugs
The dependency array warning is your friend, not an annoyance. It catches bugs before they manifest as confusing behavior in production.