Definition for rule 'react-hooks/exhaustive-deps' was not found

Question

I am getting the following eslint error after adding // eslint-disable-next-line react-hooks/exhaustive-deps in my code.

8:14 error Definition for rule 'react-hooks/exhaustive-deps' was not found

I referred to this post to fix this but the solution mentioned doesn't work in my case. Any clue how to suppress this eslint error?

PS I'm using standardjs in conjuction.

score 111 · Answer 1 · answered Jan 13 '20 at 10:13

111

This typically happens because the react-hooks plugin is missing in the .eslintrc plugin configuration. Ensure you have added react-hooks as in the example below:

"plugins": ["react", "react-hooks",],

answered Jan 13 '20 at 10:13

Erik Töyrä Silfverswärd

10,242
3
24
22

5

This should really be considered the accepted answer. – SunshinyDoyle Oct 28 '20 at 13:55
1

if I don't have a .eslintrc I can just crate a .eslintrc file and add "plugins": ["react", "react-hooks",] in it ? Which directory should I put it in? – jjzjx118_2 Jan 05 '21 at 03:40
[https://www.npmjs.com/package/eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) gives you almost all the information you need to know about the configurations – Geeganage May 23 '22 at 06:15
Which file does this go in? – Petrus Theron Jun 14 '23 at 11:08

score 8 · Answer 2 · answered Apr 16 '20 at 08:09

8

Make sure you define your react-hooks both in extends and plugins array like this

"extends": [
    "react-hooks",
  ],
  "plugins": [
    "react-hooks"
  ],

answered Apr 16 '20 at 08:09

JupiterAmy

374
2
11

1

This created an error for me: `Failed to load plugin 'react-hook' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-react-hook'` – Sasha Davydenko Aug 05 '20 at 11:28
6

This is incorrect. Do NOT extend. Follow the official guide: https://reactjs.org/docs/hooks-rules.html – oyalhi Apr 16 '21 at 17:51
the official guide is useful – Sealey Wang Dec 22 '22 at 09:32

score 5 · Answer 3 · answered Jan 06 '20 at 12:27

5

Make sure you have put the rule in the rules object in your .eslintrc. Installing the plugin alone is not enough for the rules to start working

"react-hooks/exhaustive-deps": "warn",

and I assume you have already added react-hooks plugin into the plugins array in the .eslintrc

answered Jan 06 '20 at 12:27

Mark Shulhin

119
5

Will `"react-hooks/exhaustive-deps": "off"` or `"react-hooks/exhaustive-deps": 0` work to disable globally ? – Taylor Austin Sep 20 '20 at 01:35
Hey, Taylor, yes both "off" and 0 should work to disable the rule. It depends on what you refer to as "global" in this case. If the eslint config is in your application folder then it will turn it off for the application workspace, if it is a global config and used in many projects it will disable it globally – Mark Shulhin Oct 23 '20 at 13:35

UtkarshPramodGupta · Accepted Answer · 2020-11-03T15:49:36.793

2

Not a perfect solution but changing:

// eslint-disable-next-line react-hooks/exhaustive-deps

to:

// eslint-disable-next-line

suppressed that error.

edited Nov 03 '20 at 15:49

answered Jan 06 '20 at 14:15

UtkarshPramodGupta

7,486
7
30
54

15

I advise against using `// eslint-disable-next-line` as that will completely disable all ESLint rules for the following line. – Erik Töyrä Silfverswärd Jan 13 '20 at 10:20
1

Agree, disables should always be as specific as possible to only the rule(s) that really need to be disabled. This should not be considered a solution. – SunshinyDoyle Oct 28 '20 at 13:51
This should not be the accepted answer. This is a really bad recommendation, especially for this lint issue. – jens Oct 28 '21 at 18:03
`// eslint-disable-next-line` shouldn't be used to disable as it would disable catching any other rule voilations – AbhishekGowda28 Jul 07 '22 at 07:13

score 2 · Answer 5 · answered Dec 02 '21 at 10:47

Assuming you are using vscode and you have in your package.json the necessary packages such as

"eslint-plugin-react-hooks": "^4.3.0",

and in your eslintrc.js

what the other answers have suggested then you might have to just restart

ESLint: Restart ESLint Server from

cmd/ctrl + shift + P

score 2 · Answer 6 · answered May 03 '22 at 12:07

2

Put below code to package.json

"eslintConfig": {
  "extends": "react-app"
}

answered May 03 '22 at 12:07

MickeyWoW

41
5

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 04 '22 at 08:42
this worked for me create-react-app version 5.0.1 react 17 – Nigel Savage Oct 27 '22 at 14:50

Definition for rule 'react-hooks/exhaustive-deps' was not found

6 Answers6

Linked