How to Fix - React Hook useEffect has a missing dependency

The warning "React Hook useEffect has a missing dependency" happens when the useEffect hook uses a variable or a function that is not added to its dependencies array. You can fix this warning in the following ways:

1. Include the missing dependency.
2. Move the dependency inside the useEffect hook.
3. Use memoization hooks for objects, arrays, and functions.
4. Disable the ESLint rule.

How does the warning “React Hook useEffect has a missing dependency” happens

This warning occurs when we declared an object, function, or variable outside of useEffect and we used it inside the useEffect hook and not included it in the dependency array.

Let us take the below example for a better understanding.

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

export default function App() {
	const [count, setCount] = useState(0);
	
	useEffect(() => {
		console.log(count)
	}, [])

  	return (
    	<>      	
			<p>Count: {count}</p>
    	</>
  	);
}

Above code will show a warning: React Hook useEffect has a missing dependency: 'count'. Either include it or remove the dependency array  react-hooks/exhaustive-deps. Because the state count used inside the useEffect hook but was not added to the dependency array.

How to fix the warning

This warning can be fixed in different ways depending on your use. let us discuss all of them one by one.

Include the missing dependency

Include the missing dependency in the dependency array is the easiest way to fix the warning: React Hook useEffect has a missing dependency. In our example, the count is the state we used inside the useEffect hook. So let us add it to the dependency array.

export default function App() {
	const [count, setCount] = useState(0);
	
	useEffect(() => {
		console.log(count)
	}, [count])

  	return (
    	<>      	
			<p>Count: {count}</p>
    	</>
  	);
}

Move the dependency inside the useEffect

We can remove this warning by moving the dependency inside the useEffect hook. This solution is not suitable when we are using the useState() hook. Because useState cannot be moved inside of a useEffect hook. So the previous example cannot be resolved with this method.

But if you are working with objects or functions, you can move the dependency inside the useEffect hook.

But for your understanding of this method of solution, consider the below example which throws an error.

import React, { useEffect } from "react";

const App = () => {

	let product =  { name: 'Phone', price: 1000 };
	
	useEffect(() => {
		console.log(product);
		// Here will throw warning: React Hook useEffect has a missing dependency: 'product'.
	}, []);
	return <div>Some contents</div>;
};

export default App;

To solve the warning, move the dependency inside the useEffect hook like:

import React, { useEffect } from "react";

const App = () => {

	useEffect(() => {
		let product =  { name: 'Phone', price: 1000 };
		console.log(product);
	}, []);

	return <div>Some contents</div>;
};

export default App;

Use memoization hooks for objects, arrays and functions

When you are working with objects or arrays, you can solve the warning by memoize them using the useMemo hook and then set them as dependencies for useEffect hook.  If you are working with functions use useCallback hook instead.

Using memoization hooks is a better way to solve this error.

Please look into the below example in which we have solved the warning using the useMemo hook for object.

import React, { useEffect, useMemo } from "react";

const App = () => {

	let product =  useMemo(() => {
		return { name: 'Phone', price: 1000 }
	}, []);

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

	return <div>Some contents</div>;
};

export default App;

After using useMemo() hook, we added it as a dependency for useEffect hook. You can't set objects directly as dependencies for useEffect without using useMemo hook.

Disable the ESLint rule

The warning - React Hook useEffect has a missing dependency is a warning from ESLint. So can remove this warning by disabling the specific ESLint rule. But disabling the ESLint rule is not recommended.

You can disable ESLint by adding the below line of comment.

// eslint-disable-next-line react-hooks/exhaustive-deps

The useEffect hook will look like this:

useEffect(() => {
	console.log(count)
	// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

Conclusion

To fix the warning - React Hook useEffect has a missing dependency, you can include the missing dependency in the dependency array or include object, function, or variable declaration inside of useEffect hook. Otherways you can use of useMemo hook and then set it as a dependency for useEffect hook. Using memoization hooks is the best way to solve this warning.