CODEWITHSUNDEEP
reactjsreact-hookseslint
Taylor Austin
Taylor Austin

Reputation: 5987

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

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

Upvotes: 10

Views: 14509

Answers (4)

sigpwned
sigpwned

Reputation: 7423

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.

Upvotes: 9

Bilal Nasir
Bilal Nasir

Reputation: 250

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

Upvotes: 0

jtiscione
jtiscione

Reputation: 1191

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

Upvotes: 2

Aaron
Aaron

Reputation: 111

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

Upvotes: 11

Related Questions