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 reason you're supposed to put all variables that you use in your `useEffects` 'deps' array is not doing so can create weird issues due to stale data. 

---

For example, given your use case, suppose your component props are initially `{foo: false, bar: false }` (assume `fetchValue` is some fixed function), and then they change to `{foo: true, bar: true}`. In this case, your component will call `fetchValue` as expected.

But as another example, suppose your props change from `{foo: false, bar: false}` to `{foo: true, bar: false}` and then change to `{foo: true, bar: true}`. In this case, `fetchValue` has not fired, despite that the props are the same as they were at the end of the previous example.

Maybe this isn't "wrong", per se, but it's certainly weird and unintuitive: ideally your component should behave consistently based on its props and it shouldn't matter what order the props changed. 

---

So, yes, you can always `eslint-ignore` the deps array to allow it to be incomplete, but I'd suggest looking for another solution, personally. 

It's hard to be specific without more information about the use case, but perhaps the call to `fetchValue` can be memoized so that it doesn't do anything if `foo` hasn't changed? Or perhaps `foo` and `bar` could be combined into a single prop so they change together?
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 />

}

```