React: eslint-plugin-react-hooks : conflicts with with eslint no-undef rule?

Created on 14 Feb 2019  路  1Comment  路  Source: facebook/react

Do you want to request a feature or report a bug?

Guidance?

What is the current behavior?

Trying to setup eslint w/ eslint-plugin-react-hooks and running into an issue where it seems to conflict with eslint's normal no-undef rule.

const [x,y] = useState('');

results in "useState is not defined eslint(no-undef)"

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Here is my .eslintrc

{
  "extends": [
    "plugin:react/recommended"
  ],
  "plugins": [
    "react-hooks"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "impliedStrict": true
    }
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "no-undef": "error"
  },
  "settings": {
    "react": {
      "version": "16.8"
    }
  }
}

Maybe I'm just missing some detail in the docs?

What is the expected behavior?

Given the react component code:

function SignIn(props) {
  totally_not_defined();
  const [email, setEmail] = useState('');

eslint should report totally_not_defeined as an error (no-undef would do this)

eslint should not report useState as an error (but it does)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"eslint": "5.12.0",
"eslint-plugin-react": "7.12.4",
"eslint-plugin-react-hooks": "0.0.0", (happens with 1.0.1 too)

Most helpful comment

You need to import it.

import React, { useState } from 'react';

It's not a global.

>All comments

You need to import it.

import React, { useState } from 'react';

It's not a global.

Was this page helpful?
0 / 5 - 0 ratings