How to fix missing dependency warning when using useEffect React Hook?

When using React’s useEffect hook, you’ll often see a warning in your console that looks something like this:

React Hook useEffect has a missing dependency: '<variableName>'. 
Either include it or remove the dependency array.

This warning comes from ESLint’s react-hooks/exhaustive-deps rule, which ensures that all external variables referenced inside your effect are included in the effect’s dependency array. Below, we’ll explore why this happens, the best ways to address it, and a few common strategies to keep your code both clean and bug-free.

1. Why Does React Warn You About Missing Dependencies?

The useEffect hook runs after every render by default, but you can control when it runs by providing a dependency array as the second argument. If you reference variables or functions inside your effect that aren’t listed as dependencies, React can’t accurately predict when your effect needs to re-run—potentially causing stale data, missed updates, or inconsistent behavior.

For example:

function MyComponent({ someProp }) {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    // Fetch data using 'someProp'
    fetch(`/api/data?param=${someProp}`)
      .then(response => response.json())
      .then(json => setData(json));
  }, []); // Missing dependency warning: 'someProp'
  
  // ...
}

In the snippet above, someProp is used inside the effect, but not included in the dependency array. ESLint warns you because if someProp changes, your effect won’t re-run, possibly leaving the data state out of sync.

2. How to Properly Include Dependencies

The simplest fix is to add all variables and functions referenced inside the effect to the dependency array:

function MyComponent({ someProp }) {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch(`/api/data?param=${someProp}`)
      .then(response => response.json())
      .then(json => setData(json));
  }, [someProp]); // Now 'someProp' is included
  
  // ...
}

Now, whenever someProp changes, the effect will re-run, ensuring data is fetched again based on the new someProp.

3. Common Strategies to Handle Functions Inside `useEffect`

a) Declare Functions Inside the Effect

If the function is only used inside the effect, consider defining it in the effect:

React.useEffect(() => {
  async function fetchData() {
    const response = await fetch(`/api/data?param=${someProp}`);
    const json = await response.json();
    setData(json);
  }
  fetchData();
}, [someProp]);

b) Memoize Functions

If you define a function outside the effect and you don’t want it to change on every render, use the useCallback hook:

const fetchData = React.useCallback(async () => {
  const response = await fetch(`/api/data?param=${someProp}`);
  const json = await response.json();
  setData(json);
}, [someProp]);

React.useEffect(() => {
  fetchData();
}, [fetchData]);

This way, fetchData remains stable unless someProp changes, so your effect’s dependency array accurately reflects when it needs to re-run.

4. Intentionally Omitting Dependencies

Sometimes, you actually want to run an effect only once on mount (like listening for a WebSocket event or setting up an external library). In that case, you might see a warning for missing dependencies you intentionally don’t want to include. Two common approaches:

Comment Your Intent:
You can disable the ESLint rule for a specific line, but clearly comment why:
```
React.useEffect(() => {
  // your effect logic ...
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
```
Make sure you do this only when you genuinely don’t need to rerun the effect if dependencies change.
Refactor Logic:
Sometimes, a better approach is to separate logic into smaller hooks or functions that clarify the distinction between one-time setup code and reactive code.

5. Pitfalls and Best Practices

Keep Effects Focused
- Each effect should handle a single concern if possible. Splitting complex logic into multiple effects makes dependencies clearer.
Never Manually Sync State
- Trying to keep two states in sync manually often signals a design flaw. Reconsider your data flow or how you structure your state.
Don’t Disable ESLint Silently
- If you must remove a dependency or disable the rule, document your reasoning. This ensures future maintainers (and your future self) understand why.

Strengthening Your React and JavaScript Foundation

Properly handling dependencies in useEffect is just one step toward writing robust React applications. If you’re looking to deepen your understanding of JavaScript and best practices in React, consider these resources from DesignGurus.io:

Grokking JavaScript Fundamentals
Perfect for refining your knowledge of modern ES features and writing more predictable, efficient React code.
Grokking the Coding Interview: Patterns for Coding Questions
Ideal if you want to ace technical interviews, reinforcing problem-solving skills and algorithmic thinking crucial for top engineering roles.

If you prefer personalized guidance, check out Coding Mock Interviews with ex-FAANG engineers to get real-time feedback on your coding, debugging, and system design approaches.

Conclusion

The missing dependency warning in useEffect is React’s way of helping you keep your data flow predictable. To fix it, ensure every variable or function used inside the effect is included in its dependency array. If you must intentionally omit dependencies, clearly state your reasons. By following these best practices—and continuously refining your React and JavaScript skills—you’ll write cleaner, more reliable code that stays in sync with changing data and user interactions. Happy coding!

CONTRIBUTOR

TechGrind