Question: I know the how useEffect's dependencies works. However in my scenario, I should not watch the change of a prop value I use it as a condition to process flow, but I will get a react-hooks/exhaustive-deps warning if I don't put it in the dependencies array.

My scenario is that if foo and fetchValue change, I want to re-run the whole fetch. Although I use bar as a condition to decide is the fechValue called, but in my business logic, the change of bar should not make re-run the block.

```
const Component = ({ foo, bar, fetchValue }) => {
  useEffect = (
    () => {
      if(foo) {
        if (bar) {
          fetchValue();
        }
      }
    },
    [foo, fetchValue] // will get a warning `react-hooks/exhaustive-deps`
  )

  return <div />

}

```

Answer: 
The ESLint rule is there to provide safety with the `useEffect` hook.

If you're absolutely sure the value is not a dependency of `useEffect`, you can add a comment to ignore the ESLint rule: [Disabling Rules with Inline Comments](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments).

I would suggest adding `// eslint-disable-next-line` instead of file-wide `eslint-disable`.

Here's [more context about this by Dan Abramov](https://github.com/facebook/react/issues/14920#issuecomment-472018256):

> 
> 
> > 
> > is there any way I can disable this rule specifically for places where the spread operator is used?
> > 
> > 
> > 
> 
> 
> You can always `// eslint-disable-next-line react-hooks/exhaustive-deps` if you think you know what you're doing.
> 
> 
>
Logic like that happens quite often with if statements in 'useEffect'. First of all, there is no need to add dependencies at all, you could just leave it empty. 

Now there are some things you could do, either simply ignore the warning, because your code looks fine. Or reconstruct your code where `bar` is an argument of `fetchValue()`. So you're code would be:

```
const Component = ({ foo, bar, fetchValue }) => {
  useEffect = (
    () => {
      if(foo) {
        fetchValue(bar);        
      }
    },
    [foo, fetchValue] 
  )

  return <div />

}

```

And start your `fetchValue(baz)` declaration with `if(baz){ //your code}`.

Kind of cumbersome though. 

You need to ask yourself, why and where do you expect foo or bar to change? Inside the component itself? Shouldn't `foo` and/or `bar` be states then with `foo` and or `bar` as defaultValues?

```
const Component = ({ foo, bar, fetchValue }) => {

  const [fooState, setFooState] = useState(foo);
  const [barState, setBarState] = useState(bar);

  useEffect = (
    () => {
      fooState && barState && fetchValue(); 
    //does the same as your code, I just prefer short circuits for these kind of things.
    },
    [fooState, fetchValue()] 
  )

  return <div />

}

```