为什么 eslint-plugin-react-hooks 在有条件地使用 React 钩子时不会发出警告？

Question

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
}

Answer 1

This is what worked for me:

1. First install the appropriate eslint plugin:

   $ npm i --save-dev eslint-plugin-react-hooks

2. Add it into your .eslintrc together with default config:

  {
    "plugins": [
      ...
      "react-hooks"
    ],
    "rules": {
      ...
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn"
    }
    ...

3. Install the eslint configuration template "react-app":

  $ npm i --save-dev eslint-config-react-app

4. In your .eslintrc extend from the newly installed configuration:

  {
    ...
    "extends": "react-app"

5. Make sure you have the proper peer dependencies of the new package, eg I had to do:

  $ npm i --save-dev eslint-plugin-flowtype

6. Make sure your eslint package is version 5+ eg 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

7. Restart VSCode
8. Press Cmd-Shift-U to open the output terminal, switch to Eslint in the dropdown menu and check that it loaded without errors.

Answer 2

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"; )

Answer 3

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

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

Answer 4

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'],

Answer 5

You should not be using hooks within conditions. This will cause errors, because the only way react knows how to associate stateful values to variables is by order, which in this case will not be consistent.

check out the docs, they spell out the rules of hooks. https://reactjs.org/docs/hooks-rules.html

what you want is something more like this

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