How to disable react-hooks/exhaustive-deps eslint warning globally?

I had this same "issue" using useEffect as componentDidMount(). You can ignore that warning adding a file .eslintrc.json in the root of your project

Inside goes something like this (This worked for me):

{
"overrides": [
    {
        "files": ["**/*.js"],
        "rules": {
            "react-hooks/exhaustive-deps": "off"
        }
    }
]
}

For my CRA (create-react-app) application, creating one of the following (equivalent) .eslintrc files at the project root did the trick for me:

.eslintrc.yml:

extends:
  - react-app
rules:
  react-hooks/exhaustive-deps: off

.eslintrc.json:

{
  "extends": [ "react-app" ],
  "rules": {
    "react-hooks/exhaustive-deps": "off"
  }
}

I found that if I didn't include the extends clause, then I disabled the react-hooks/exhaustive-deps warnings successfully, but I also lost many other warnings as well, which was unacceptable.

This solution is documented (somewhat awkwardly and incompletely) in the CRA docs.

We have been looking for a way to disable this rule across the project, because people trying to fix it keep introducing infinite loop bugs, often ones that are good at staying hidden until the right combination of variables comes along.

The rule basically makes an aggressive assumption that no design or thought at all has gone into the function passed to useEffect(). If there's an if/else block that calculates one dependency from the other if it's absent, handling its job correctly, blindly adding both variables to the dependencies array is very likely to trigger an infinite loop.

We can always tell everyone to add eslint-ignore lines all across the project but this is the only rule we have trouble turning off. (This particular project has the ESLint configuration inside package.json since it uses react-scripts, and we're trying to turn it off in the "rules" block by setting it to "off". I don't know if it's also a problem with .eslintrc files.)

you have to use file extension jsx if your useEffect is in jsx file so the overrides will become as follow

{
"overrides": [
    {
        "files": ["**/*.jsx"],
        "rules": {
            "react-hooks/exhaustive-deps": "off"
        }
    }
]
}