Are you having trouble with the problem of react hooks exhaustive deps? Don’t be alarmed! In this article, we’ll explain what’s causing it and offer some solutions to fix it. Let’s start!

What is the leading cause of this warning? 

A dependency array in a React hook is the root of this problem. It triggers the “react-hooks/exhaustive-deps” linting warning and causes the error such as below:

react-hooks/exhaustive-deps

It can also happen when react hook commits an error with useEffect by generating a stale closure that is harder to detect and can result in problems that are difficult to identify – variables in useEffect that have never been updated.

How to remove the react hooks exhaustive deps warning? 

Method 1: Incorporate a callback into your setCount process

useEffect(() => {
  setCount((count) => count + 1);

}, []);

Because the count is no longer a dependency, our problem is resolved. 

Method 2: Utilize a useCallback 

Although the quick fix option is frequently effective, you should always examine your code to determine why there was a warning. 

const someFunction = (count) => {
  // do something with count
};

useEffect(() => {
  someFunction(count);

}, [count]);

We have another dependency warning since someFunction must also be part of the dependency array. That error occurs to warn about the possibility of an infinite loop. To guarantee that someFunction does not change references among renders, use a useCallback hook to solve the error thoroughly.

const someFunction = useCallback((count) => {
  // do something with count
}, []);

useEffect(() => {
  someFunction(count);

}, [count, someFunction]);

Method 3: Add the count variable

Take a look at the example below: 

const App() {
  const [count, setCount] = useState(0);
  useEffect(function () {
    console.log(`Count is: ${count}`);
  }, []);

  return (
    <div className="App">
      {count}
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

It would be best if you went to your IDE’s Quick Fix button, which will fix the error by adding the count variable. However, this technique cannot be used in every situation; instead, you should carefully examine your commands and determine which solution is the best fit.

Method 4: Change the original code

Change the original code:

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

To: 

// eslint-disable-next-line

This will quickly solve the issue and take off the warning. 

Method 5: Utilize the useMemo Hook

const obj = useMemo(() => {
    return { country: 'US', city: 'New York' };
  }, []);

The useMemo Hook will remember the object’s value, removing the warning of react hooks exhaustive deps.

Conclusion 

On our page, we hope you found the best solution to the error “react hooks exhaustive deps“. We also hope that this gives you some insight into the error you encountered and, ideally, a few more options for avoiding it in the future. If you have any further problems with this error, please comment, and we will get back to you as soon as possible! Thank you for your time!

Read more 

→  Tips On Solving The Error: “React Hook useEffect has a missing dependency”