How to Fix Missing Dependency Warning When Using useEffect Hook?

When using the useEffect hook in React, you might encounter warnings about missing dependencies. This happens because useEffect expects you to specify all the dependencies that the effect depends on. The React Hooks ESLint plugin will helpfully point out any missing dependencies to ensure your effects run correctly.

In this article, we will learn how to Fix Missing Dependency Warning When Using useEffect Hook.

Example Scenario and Fixes

Effect uses state or props but doesn't list them as dependencies

useEffect(() => {
  console.log(someProp);
}, []); // Warning: 'someProp' is not listed in the dependencies

Fix

useEffect(() => {
  console.log(someProp);
}, [someProp]);

Effect uses a state setter function

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

useEffect(() => {
  setCount(count + 1);
}, []); // Warning: 'count' is not listed in the dependencies

Fix

useEffect(() => {
  setCount(count + 1);
}, [count]);

Effect uses a function or variable declared inside the component

const someFunction = () => {
  console.log('Hello');
};

useEffect(() => {
  someFunction();
}, []); // Warning: 'someFunction' is not listed in the dependencies

Fix

useEffect(() => {
  someFunction();
}, [someFunction]);

Avoiding Unnecessary Re-Renders

Sometimes, adding all dependencies may lead to unnecessary re-renders or re-runs of effects. Here's how you can address such cases:

Memoizing functions or objects:

If you have functions or objects in your dependencies, you can memoize them using useCallback or useMemo.

const memoizedFunction = useCallback(() => {
  // Some computation
}, [dependency]);

useEffect(() => {
  memoizedFunction();
}, [memoizedFunction]);

Refactoring code to avoid unnecessary dependencies:

Sometimes, it helps to restructure your code so that the effect depends on fewer variables.

const someExpensiveComputation = useMemo(() => {
  return computeSomething(expensiveDependency);
}, [expensiveDependency]);

useEffect(() => {
  console.log(someExpensiveComputation);
}, [someExpensiveComputation]);

Ignoring Warnings (Use with Caution)

If you are sure that an effect doesn't need to re-run when certain dependencies change, you can safely ignore the warning, though this is generally not recommended:

/* eslint-disable react-hooks/exhaustive-deps */
useEffect(() => {
  someFunction();
}, []);
/* eslint-enable react-hooks/exhaustive-deps */

Steps to Stepup a React App

Step 1: Create a React App using the below command:

npx create-react-app myapp

Step 2: Navigate to the root directory of your project:

cd myapp

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Below is an example to fix missing dependency warning when using useEffect React Hook.

// ExampleComponent.js

import React, {
    useState, useEffect,
    useCallback, useMemo
} from 'react';

function ExampleComponent({ someProp }) {
    const [count, setCount] = useState(0);

    const increment = useCallback(() => {
        setCount(prevCount => prevCount + 1);
    }, []);

    const computedValue = useMemo(() => {
        return count * 2;
    }, [count]);

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

    useEffect(() => {
        console.log(`Some prop: ${someProp}`);
    }, [someProp]);

    return (
        <div>
            <p>Count: {count}</p>
            <p>Computed Value: {computedValue}</p>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

export default ExampleComponent;

// App.js

import React, { useState } from 'react';
import ExampleComponent from './ExampleComponent';
import './App.css';

function App() {
    const [propValue, setPropValue] =
        useState('Initial Prop');

    const changeProp = () => {
        setPropValue(`Updated Prop: ${
            new Date().toLocaleTimeString()}`);
    };

    return (
        <div className="App">
            <header className="App-header">
                <h1>useEffect Example</h1>
                <ExampleComponent someProp={propValue} />
                <button onClick={changeProp}>
                    Change Prop
                </button>
            </header>
        </div>
    );
}

export default App;

Output: