Create-react-app: Support React Hooks

[kMeillet]

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]

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

[EivindArvesen]

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

Should I just go ahead and make a PR?

[gaearon]

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]

@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]

@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]

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 is where I'd ended up also :)

[acauquil]

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

We really need this one guys 😍

[100terres]

What are we waiting for?

[ianschmitz]

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]

🙏

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]

Closed via #5997