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

Question

I know I can disable the file or disable the line, but I want to do it globally for now so I don't have to write that in every time I want to use a useEffect as a componentDidMount() .

I have tried:

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

Answer 1

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"
        }
    }
]
}

Answer 2

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.)

Answer 3

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"
        }
    }
]
}