Avoid ignoring react-hooks/exhaustive-deps linting warnings
Published: 2022-08-09 19:08:00

This post is inspired by the conversation on this [github issue](https://github.com/facebook/react/issues/14920#issuecomment-471070149) which was shared by a colleague in one of our technical meeting. There are so many other cases discussed here so its worth reading.

###Rationale
While working with a react hook, you must have been in a situation when you get this linting warning `react-hooks/exhaustive-deps`. You try to add the dependency to the array and may ended up in an infinite loop or any unexpected behavior;

####For example: 
You have a state count in your component and you want to increment it only once. Most likely you will write in this way.

``` javascript
  useEffect(() => {
    setCount(count + 1);     
  }, []);
```
 
This will give you a warning that <mark>`React Hook useEffect has a missing dependency: 'count'. Either include it or remove the dependency array`</mark>

You have an easy exit: that is to ignore the error by disabling the rule; 
```// eslint-disable-next-line```

``` javascript
useEffect(() => {
  setCount(count + 1);
  // eslint-disable-next-line
}, []);
```
 ***
<center>**It worked - Great job!!!  :clap:** But wait;</center>
 
 
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1do8qte3no6ikprbcnw.jpeg)

The design of `useEffect` forces you to confront it. You can of course work around it, but the default is to nudge you to handle these cases. Instead of disabling these warnings, I've found it worth finding a way to accommodate the dependency array requirements.

In most situations its practically possible and I will talk about some very common use-cases here.

#### For state dependencies
In the preceding example, you can get rid of that warning using a callback in your `setCount` method because count will no longer be a dependency :blush:

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

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47u3kg4t2qcv2ipvamcv.jpeg)
 
 
 
>Another drawback off adding <mark>`// eslint-disable-next-line`</mark> could be that it will not warn you about future dependencies. **i.e** If you made some changes in that hook which has a dependency but you forgot to add it in the dependency array, you will not get a warning now as you already have disabled that. This could lead to unexpected behavior and even break your app.

#### For function dependencies
When you use any function in the `useEffect` hook.
Let’s consider you have a function that uses `name` as argument and does something. You will get an `es-lint` warning for not adding the function in the dependency array.

``` javascript
const functionName = (name) => {
  // do something
};

useEffect(() => {
  functionName(name);
}, [name]);
``` 
But, even adding it directly to the dependency wont fix it and you will get another warning that <mark>`you have just caused an infinite loop because someFunction has a different reference on each render`</mark>. So whats the fix?

The solution here is likely to wrap that function in a `useCallback` hook because `useCallBack` will return a memoized callback. It makes certain that the function doesn’t change references between renders.

``` javascript
const functionName = useCallback((name) => {
  // do something with count
}, []);

useEffect(() => {
  functionName(name);
}, [name, functionName]);
```
 
**PS:**
>As per official [useCallBack](https://reactjs.org/docs/hooks-reference.html#usecallback) docs make sure that every value referenced inside the callback should also appear in the dependencies array.

---

Here is another use-case I saw on the same github issue related to useCallBack, where a user will add an email and invite those email to the app. It potentially fix the deps into `[emails, props]`. Whereas, actually it needs to update the function reference only when `onSubmit` change and not any other `prop`.

``` javascript
const handleSubmit = React.useCallback(
  () => {
    props.onSubmit(emails);
  },
  [emails, props]
);
```

>This is because technically props.onSubmit() passes props itself as `this` to `onSubmit` call. So `onSubmit` might implicitly depend on props and the best practice is always de-structuring.

### Valid-Case
I also want to talk about one of the legitimate cases that I found on the [same thread](https://github.com/facebook/react/issues/14920#issuecomment-467896512), where you may have to disable extraneous dependency warning

``` javascript
useEffect(() => {
    window.scrollTo(0, 0);
  }, [activeTab]);
```

### Summary
Its very common to disable/ignore `react-hooks/exhaustive-deps` linting warnings in most cases. Probably you actually want to fire the hook when the dependency changes. It might not seem like it at first, but there are probably some edge cases for which your effect logic will fail if you don’t include the variable in the dependency array. So, you should try to fulfill react hook dependency requirements with given ways instead disabling. 

***
<center> Hit the :heart: if it was helpful and you learn something new </center>
***