Add linting for React Hooks

[kristianmandrup]

Similar to: https://www.npmjs.com/package/eslint-plugin-react-hooks

[Falieson]

Some more information about hook rules: https://reactjs.org/docs/hooks-rules.html

[eps1lon]

I took a quick stab at it and while porting AST specific differences is pretty straightforward I hit a wall with codepath analysis. eslint has a built-in API for codepath analysis which is heavily used by eslint-plugin-react-hooks. A port is therefore not that trivial since one would have to analyse the codepath for a given node in tslint.

For now I'm using eslint with typescript-eslint-parser that will only use eslint-plugin-react-hooks. The following eslint config should work for hooks in ts files:

// .eslintrc.js
module.exports = {
  parser: 'typescript-eslint-parser',
  parserOptions: {
    jsx: true,
  },
  plugins: ['react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
  },
};

I'm using this with "lint:hooks": "eslint --no-eslintrc -c \".eslintrc.ts-hooks.js\" \"src/**/*.{ts,tsx}\"",

[Gelio]

Take a look at https://github.com/Gelio/tslint-react-hooks

I implemented a TSLint rule for detecting invalid uses of React Hooks, based on eslint-plugin-react-hooks.

It relies on detecting nesting the possible misuses of hooks, like calling hooks inside loops, if statements, class components and functions that themselves are not components or custom hooks.

I would love to receive some feedback 😄 I created some tests for the rule (the test directory in the repository) and it seems to work quite well. Check it out

[rainstormza]

@Gelio
I've tried your tslint-react-hooks but look like it doesn't work.

npx create-react-app react-hooks --typescript
yarn add tslint-react-hooks --dev
touch tslint.json (and add your config)
yarn start

import React, { useState, useEffect } from 'react'

function Hooks() {
  const [counter, setCounter] = useState(0)
  const array = [1, 2, 3]

  array.forEach(value => {
    useEffect(() => console.log(value))
  })
  return <div>{counter}</div>
}

export default Hooks

It should be error at useEffect but my vscode does not warning anything.

[Gelio]

@rainstormza Please try installing tslint alongside tslint-react-hooks 🙂 , As far as I know, it is required for errors to show up and it does not seem to be installed by default via create-react-app --typescript

Having installed tslint I am seeing an error in vscode, as expected:

[rainstormza]

@Gelio
I think install tslint globally is enogh.
I have to install yarn add tslint --dev on local project too.

thanks :)

[thejohnfreeman]

@Gelio, have you considered opening a PR in this project?

[Gelio]

@thejohnfreeman Good idea 👍 I have just filed a PR: #204

[vzgo0022]

@Gelio what you mean "try installing tslint alongside tslint-react-hooks"? Can you give me step by step instruction?

[Gelio]

@vzgo0022 Just run npm install tslint --save-dev. That should install tslint locally in a project.

Then, take a look at the readme of https://github.com/Gelio/tslint-react-hooks for instructions on how to install and configure the tslint-react-hooks rule

[adidahiya]

open to PRs, but I'm also curious to hear about your experiences (if any) using eslint-plugin-react with typescript-eslint, see #210 (edit: while I work on a migration guide...)

[enoh-barbu]

@Gelio seems that it doesn't work with .tsx files

[Gelio]

@enoh-barbu Please file an issue in https://github.com/Gelio/tslint-react-hooks with more information and reproductions steps. Let's not pollute this thread with bug-related comments regarding another project 🙂

[adidahiya]

Closing due to #210, future work should be focused on getting the ESLint plugin working with TypeScript

[jrr]

For anyone still here, it's time to get off of tslint. I've migrated a couple projects, and eslint-plugin-react-hooks works well with typescript-eslint.