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
arialpew opened this issue Oct 28, 2018 · 12 comments
Closed

Support React Hooks #5602

arialpew opened this issue Oct 28, 2018 · 12 comments
Milestone

Comments

@arialpew
Copy link

arialpew 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
Copy link
Contributor

gaearon commented Oct 28, 2018

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

@EivindArvesen
Copy link
Contributor

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
Copy link
Contributor

gaearon 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
Copy link

chriswilty 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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link

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

@acauquil
Copy link

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

We really need this one guys 😍

@100terres
Copy link

What are we waiting for?

@ianschmitz
Copy link
Contributor

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
Copy link

lvl99 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 pushed a commit that referenced this issue Mar 15, 2019
* 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
Copy link
Contributor

iansu commented Mar 15, 2019

Closed via #5997

@iansu iansu closed this as completed Mar 15, 2019
JoviDeCroock added a commit to JoviDeCroock/create-react-app that referenced this issue Mar 15, 2019
* 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.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants