How To Fix “React Hook useEffect has a missing dependency”

Posted on by Brent Johnson
React hook useeffect has a missing dependency error

If you are using the useEffect hook in React and get an error ‘React Hook useEffect has a missing dependency error’, this article is for you. Let’s go into detail.

What causes error

The warning starts from eslint “React Hook useEffect has a missing dependency”. The error occurs when the “useEffect” hook use includes a variable or a function that doesn’t include in the dependencies array.

A dependencies array is a concept that attaches to the hook method or function components. It exists in some hooks like “useEffect” or “useCallback”. Both of them have two arguments. The first one is a callback or a function that execute the statement. The second one is the dependency array.

Look at the following example:

const anArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
useEffect(() => {
	console.log(anArray);
}, [anArray]);

In the code above, anArray that passed in the second argument is a ‘dependency array’.

The example of the error:

import React, { useEffect, useState } from "react";
 
const App = () => {
    const [infor, setInfor] = useState({ 
    	name: "", 
        age: "", 
        country: "" 
    });

    const anInfor = { 
    	name: "Togban", 
        age: 18, 
        country: "VietNam" 
    };

    useEffect(() => {
      	setInfor(anInfor);
      	console.log("useEffect execute");
    });
  
    return (
        <>
            <ul>
                <li>Name: {infor.name}</li>
                <li>Age: {infor.age}</li>
                <li>Country: {infor.country}</li>
            </ul>
        </>
    );
};

export default App;

Output error:

WARNING in [eslint]
src\App.js
Line 15:6:  React Hook useEffect has a missing dependency: 'obj'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Solutions for error “React Hook useEffect has a missing dependency”

We have some solutions to fix this error.

Solution 1: Disable the eslint rule for a line

You can disable the eslint rule for a line by this code line:

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

Example:

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

const App = () => {
    const [infor, setInfor] = useState({ 
    	name: "", 
        age: "", 
        country: "" 
    });

    const anInfor = { 
    	name: "Togban", 
        age: 18, 
        country: "VietNam" 
    };

    useEffect(() => {
        setInfor(anInfor);
        console.log("useEffect execute");
		//eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
  
    return (
        <>
            <ul>
                <li>Name: {infor.name}</li>
                <li>Age: {infor.age}</li>
                <li>Country: {infor.country}</li>
            </ul>
        </>
    );
};

export default App;

Solution 2: Pass the object into the dependency array

Of course, the most straightforward way to solve the problem is to pass the object we are using into a dependency object. However, if we pass it normally, it will get the error because the object is a reference variable. What we store in the infor variable is just the location of the original object. Suppose we pass in a dependency array. It is simply just an object that has the same key and value, not the same location that is important. So we will have to store. The solution is you can use useMemo() hook. useMemo() will help you memorize your object. You can read more about useMemo() here.

Example:

import React, { useEffect, useState, useMemo } from "react";
 
const App = () => {
    const [infor, setInfor] = useState({ 
      	name: "", 
      	age: "", 
      	country: "" 
    });
  
    const anInfor = useMemo(() => {
      	return { 
          	name: "Togban", 
          	age: 18, 
          	country: "VietNam" 
        };
    }, []);
  
    useEffect(() => {
        setInfor(anInfor);
        console.log("useEffect execute");
    }, [anInfor]);
  
    return (
        <>
            <ul>
                <li>Name: {infor.name}</li>
                <li>Age: {infor.age}</li>
                <li>Country: {infor.country}</li>
            </ul>
        </>
    );
};

export default App;

And the code will work without Warning.

Summary

In this tutorial, I have shown and explained how to solve the error “React Hook useEffect has a missing dependency error”. You can simply disable the error, or you can use useMemo() method to support your pass object into the dependency array.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *