Why eslint-plugin-react-hooks doesn't warn when using react hooks conditionally?

15
votes

I'm using react 16.8, and eslint-plugin-react-hooks 1.6.0 .When I use hooks conditionally, I hoped eslint was going to warn me. Here is my config :

"eslintConfig": {
    "parser": "babel-eslint",
    "plugins": [
      "react-hooks"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
}

If I use hooks conditionally in custom hooks, there will be a warning like this: "React Hook \"useState\" is called conditionally. React Hooks must be called in the exact same order in every component render."

function useCustomHook() {
  if (Math.random() > 0.5){
    const [a, setA] = useState(0)
  }
}

but if I use hooks in function component, it does't work.

function MyComponent() {
  if (Math.random() > 0.5){
    const [a, setA] = useState(0)
  }
  return null
}
4
reactjseslint
reactjs.org/docs/hooks-rules.html read this - Murtaza Hussain
I had read this doc already. I konw i shouldn't use hooks in condition. But, i just want to make sure my eslint is working correctly. - junting liu
I think if the eslint-plugin-react-hooks is working corretly, it should give some warning to me , when i use hooks in condition. But it didn't. - junting liu
@juntingliu I have the same problem. Did you ever get it to work? - thisissami
Before I try and answer this question, I want to ask. Are you actually running the linter using: npm run lint because if you are just running npm start it will not show these warnings unless you update your start command to do so. Out of the box with the default example from the docs, it's setup to only warn when you run the linter. I added you conditional to my component and it warned me as it should. - Eric Bishard

4 Answers

4
votes

This is what worked for me:

  1. First install the appropriate eslint plugin:
   $ npm i --save-dev eslint-plugin-react-hooks
  1. Add it into your .eslintrc together with default config:
  {
    "plugins": [
      ...
      "react-hooks"
    ],
    "rules": {
      ...
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
    ...
  1. Install the eslint configuration template "react-app":
  $ npm i --save-dev eslint-config-react-app
  1. In your .eslintrc extend from the newly installed configuration:
  {
    ...
    "extends": "react-app"
  1. Make sure you have the proper peer dependencies of the new package, e.g. I had to do:
  $ npm i --save-dev eslint-plugin-flowtype
  1. Make sure your eslint package is version 5+ e.g. 5.16.0 works, higher should also work (but beware that higher eslint also requires newer nodejs).
  $ npm i --save-dev eslint@^5.0.0
  1. Restart VSCode
  2. Press Cmd-Shift-U to open the output terminal, switch to Eslint in the dropdown menu and check that it loaded without errors.
2
votes

Actually, when I paste your function on the App.js file created by create-react-app, there is the expected error when running the app.

Maybe your function isn't considered a React Component (your function is considered a common function). Make sure you have React on scope (import React from "react";)

0
votes

Your eslint config also does not work for me, but this one does:

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

I added the following dependencies: @typescript-eslint/eslint-plugin and @typescript-eslint/parser to package.json and added the following to .eslintrc.js:

extends: [... 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended']
parser: '@typescript-eslint/parser',
plugins: [..., '@typescript-eslint'],