Understanding The Exhaustive-deps Eslint Rule In React

Posted on by Nathaniel Kirk
Understanding the exhaustive-deps Eslint rule in React

Hi guys, today I’ll give you some methods to understand the ‘exhaustive-deps’ eslint rule in React. Through the article, you can know what the Rule of hook is, how to install it and ways to avoid ‘exhaustive-deps’ warning. Below are a few practical examples to help you understand more about this topic. Let’s read this article now.

Understanding the ‘exhaustive-deps’ eslint rule in React

Rule of hook

You can avoid missing React Hooks by using the eslint-plugin-react-hooks. These errors can be difficult to find and fix. This ESlint plugin will ensure that your React code complies with the Hooks guidelines.

  • Only make top-level calls to Hooks.
  • Only use Hooks when calling React functions.

In loops, conditionals or nested functions, do not invoke hooks. You should use hooks instead of returns at the top of your React method. 

Install ESLint Plugin

We can use an ESLint plugin called eslint-plugin-react-hooks that ensures these two rules always apply. If you like, you can add to the project:

The plugin has a default in Create React App. However, we can use the npm command to install and reconfigure it like the one below.

Terminal:

npm i eslint-plugin-react-hooks 

This configuration, ESlint, will prompt us to add the updated local storage function to use the effects dependency list. The problem is that every time the component re-renders, the update local storage function is created entirely. It will make useEffect() run again (Because this function differs from last time). For example, in useEffect(), we have something such as ‘setState’. The component will re-render (Just like that update local storage is created): Run useEffect => setState => re-render => Run useEffect => … This loop goes on and on.

Code:

export default function App() {
    const [infor, setInfor] = useState(0);
    const obj = {};

    useEffect(() => {
      	setInfor(obj);
    }, []);

    return (
        <div>
            <p>Name: {infor.name}</p>
            <p>Age: {infor.age}</p>
        </div>
    );
}

After installation, this plugin will check the hook and effect dependency rules. 

Some ways to avoid ‘exhaustive-deps‘ warning

Use object and array

In this example, we will use array and object to avoid plugin warnings introduced in the article.

Code:

export default function App() {
    const [infor, setInfor] = useState({
      	name: ””,
      	age: ””
    });
  
    const obj = {
      	name: ”Jack”,
      	age: ”24”
    };

    useEffect(() => {
      	setInfor(obj);
    }, []);

    return (
        <div>
            <p>Name: {infor.name}</p>
            <p>Age: {infor.age}</p>
        </div>
    );
}

The above warnings are avoided when you use the useState hook that has an empty and preformatted set.

Use useMemo() hook with useEffect() 

When we use the useEffect() hook and set the dependency value with the object, every render, useEffect() will runs again.

Code:

useEffect(() => {
    setInfor(obj);
}, [obj.age]);

So we will use a more useMemo() hook to remember the value of obj. They will prevent continuous rendering and will avoid warnings. See how to do it below to learn more.

Code:

const obj = useMemo(() => {
    return { 
      	name: 'Jack', 
      	age: '24' 
    };
}, []);

So we can avoid plugin warnings that make us uncomfortable when it appears.

Summary

In this article, we have summed up understanding the ‘exhaustive-deps’ Eslint rule in React. And we know a few ways to avoid ‘exhaustive-deps’ warnings by using object and array or using useMemo() hook with useEffect(). Let’s try them to get your desired results!

Maybe you are interested:

Related Posts

Leave a Reply

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