Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support React Hooks #5602

Closed
kMeillet opened this issue Oct 28, 2018 · 12 comments

Comments

@kMeillet
Copy link

commented Oct 28, 2018

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

This plugin enforce rule of hooks to avoid common misstakes (hook in condition, ...).

Hooks are a new React feature.

@gaearon

This comment has been minimized.

Copy link
Member

commented Oct 28, 2018

Yeah, we should probably cut 3.x alpha with this.

@EivindArvesen

This comment has been minimized.

Copy link
Contributor

commented Oct 29, 2018

I'd love to contribute here, if I could.

Should I just go ahead and make a PR?

@gaearon gaearon changed the title Add "eslint-plugin-react-hooks" in Eslint configuration Support React Hooks Oct 31, 2018

@gaearon gaearon added this to the 3.0 milestone Oct 31, 2018

@gaearon

This comment has been minimized.

Copy link
Member

commented Oct 31, 2018

Sure.

There are two action items here:

  • Add ESLint plug-in (probably behind an option in the preset, but enabled in CRA by default)
  • Add Babel plug-in that would force array destructuring to work in loose mode for known Hooks. This is important for performance.
@chriswilty

This comment has been minimized.

Copy link

commented Nov 27, 2018

@eivind88 Any progress on this? I got it working locally with minor changes in packages eslint-config-react-app and babel-preset-react-app, although I may well have missed something important.... Also not entirely sure what @gaearon means by

probably behind an option in the preset

for eslint-plugin-react-hooks. This is my first foray into create-react-app so please excuse me if I've missed something obvious, including any handling required for ejected projects.

I could always push up a branch if you want to see a diff.

@EivindArvesen

This comment has been minimized.

Copy link
Contributor

commented Dec 2, 2018

@chriswilty I'm about at the same place that you describe, but I haven't found the time to finsh it up this last week; I've also got the changes working locally.

probably behind an option in the preset

means that it should be optional, via an arg or somesuch.
This basically involves rewriting the relevant script by wrapping it in some checks similar to what can be seen in the other sub-repos, if I remember correctly.

I think I should be able to push some changes within a weeks time.

@EivindArvesen

This comment has been minimized.

Copy link
Contributor

commented Dec 9, 2018

Just pushed my changes; I think I've covered everything, except the "behind an option in the preset, but enabled in CRA by default"-part about the ESLint plugin.

I'd love some input on the best way of achieving this!

@chriswilty

This comment has been minimized.

Copy link

commented Dec 10, 2018

👍 This is where I'd ended up also :)

@acauquil

This comment has been minimized.

Copy link

commented Dec 20, 2018

Is it going to be available in a version prior to 3.0 ?

We really need this one guys 😍

@100terres

This comment has been minimized.

Copy link

commented Feb 7, 2019

What are we waiting for?

@ianschmitz

This comment has been minimized.

Copy link
Collaborator

commented Feb 7, 2019

I believe we're waiting on #5602 and #6219 before we consider hooks ready for prime time in create-react-app. @gaearon can you confirm?

@lvl99

This comment has been minimized.

Copy link

commented Feb 9, 2019

🙏

I'm getting weird errors in my CRA+TS app like:

Warning: React has detected a change in the order of Hooks called by MyComponent. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks

   Previous render    Next render
   -------------------------------
1. useContext         useContext
2. useState           useState
3. useCallback        useEffect
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

... which I'm hoping this new ESLint plugin will help me to debug!

@iansu iansu added this to To do in v3 Mar 10, 2019

@iansu iansu moved this from To do to In progress in v3 Mar 11, 2019

@iansu iansu moved this from In progress to Done in v3 Mar 15, 2019

iansu added a commit that referenced this issue Mar 15, 2019
Support React Hooks (#5602) (#5997)
* Add Babel plug-in for Hooks; Add ESLint plug-in for Hooks (WIP)

* Fix transform destructuring loose config

* Add eslint-plugin-react-hooks to package.json

* Fix package.json's

* Fix eslint-plugin-react-hooks version

* Fix package.json

* Fix package.json

* Add eslint-plugin-react-hooks to script package.json

* Force array destructuring to work in loose mode only for known Hooks

* Update based on feedback from PR

* Add 'exhaustive-deps' lint rule

* Bump eslint-plugin-react-hooks to stable version

* Remove extraneous dependency from react-scripts
@iansu

This comment has been minimized.

Copy link
Collaborator

commented Mar 15, 2019

Closed via #5997

@iansu iansu closed this Mar 15, 2019

JoviDeCroock added a commit to JoviDeCroock/create-react-app that referenced this issue Mar 15, 2019
Merge branch 'masterd' into feat/modern-build
* masterd: (24 commits)
  Add TypeScript linting support (facebook#6513)
  Support React Hooks (facebook#5602) (facebook#5997)
  Support browserslist in @babel/preset-env (facebook#6608)
  Add empty mock for http2 (facebook#5686)
  Add note about npx caching (facebook#6374)
  change named import into default import (facebook#6625)
  Stage files for commit after ejecting (facebook#5960)
  Upgrade dependencies (facebook#6614)
  Make compiler variable const instead of let (facebook#6621)
  Type check JSON files (facebook#6615)
  Change class components to functional components in templates (facebook#6451)
  Convert JSON.stringify \n to os.EOL when writing tsconfig.json (facebook#6610)
  Update html-webpack-plugin (facebook#6361)
  Enable click to go to error in console for TypeScript (facebook#6502)
  Update webpack-dev-server to 3.2.1 (facebook#6483)
  [docs] revert removal of newlines from html (facebook#6386)
  Publish
  Prepare 2.1.8 release
  Reapply "Speed up TypeScript v2 (facebook#6406)" (facebook#6586)
  Publish
  ...

# Conflicts:
#	packages/babel-preset-react-app/create.js
#	packages/react-scripts/scripts/build.js

@lock lock bot locked and limited conversation to collaborators Mar 20, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
9 participants
You can’t perform that action at this time.