Eslint and React hooks?

Question

React

What the linter does not like in this case, I act according to the React docks, but the linter is against this approach :)

Answer 1

The purpose of this rule is to useEffectclearly show how dependencies affect the actions performed in the effect. In your case, how data the call to getList in the effect affects is not obvious.
How can you solve:
1. Add the data parameter to getList, this will make the dependency explicit:

useEffect(() => {
  getList(data)
}, [data])

2. If you don't want to follow the rule, disable it in .eslintrc:

{
  "plugins": ["react-hooks"],
  // ...
  "rules": {
    // ...
    "react-hooks/exhaustive-deps":  "off"
  }
}

3. If you want to disable it once:

useEffect(() => {
  getList()
}, [data]) // eslint-disable-line

or

/* eslint-disable react-hooks/exhaustive-deps */
useEffect(() => {
  getList()
}, [data])
/* eslint-enable react-hooks/exhaustive-deps */