Support React Hooks (#5602)

[EivindArvesen]

Ref. #5602

• Add ESLint plug-in
• Add Babel plug-in that would force array destructuring to work in loose mode for known Hooks

ESLint plugin should probably be behind an option in the preset, but enabled in CRA by default – this is not yet implemented.

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[Pajn]

Doesn't this enable loose mode for all destructuring operations?

This can be very breaking and diverges from ES6 quite a bit. Instead it should only be enabled when destructuring from useState and equivalent.

[EivindArvesen]

You're right. Do you know how I might go about achieving it only for known hooks?
I thought there might be some option of specifying the known hooks in the plugin config somehow, but that doesn't appear to be the case.

[EivindArvesen]

Ping @Pajn

[Pajn]

Sorry, I completely missed the first notification.

I'm not too knowledgeable with the babel plugins or AST but I imagine that you would have to create a custom babel plugin (based on the @babel/plugin-transform-destructuring code). Some pseudo logic would be: check that the RHS of the assignment statement which does the destructuring is a function call which is a whitelisted hook name (like useState) and if so transpile that statement in loose mode, otherwise use the full transformation.

[lvl99]

@eivind88 based on @Pajn's advice, I've adapted babel-plugin-transform-destructuring to take a whitelist of property/function names to apply the loose rule when destructuring.

Have a look at lvl99/babel@e2600c3 and let me know if it could be used here.

Edit: PR on babel available here: babel/babel#9486

[EivindArvesen]

@lvl99 Great!

I've updated my PR; Could you have a look and verify that I've understood your change correctly? :)

This PRs dependency versions will need to be bumped after you PR is merged.

[lvl99]

@eivind88 I think since you have loose mode enabled on this line that it would always be enabled, even with the selectiveLoose values given, due to this line I have here.

Perhaps I need to rethink what exactly is happening or how we want to use it. isLoose would only be true if the selectiveLoose option is set and the checked item matches the selectiveLoose list, otherwise if it is false it will defer to the loose value (in your PR you have loose: true so it would end up running all destructuring in loose mode).

Maybe my isLoose conditional should be a bit more selective, by returning a false if the item is not on the selectiveLoose list even if the loose option is true:

const isLoose = this.selectiveLoose
  ? checkNameMatchesSelectiveLoose(objRef.name, this.selectiveLoose))
  : loose;

I think that would make more sense!

Edit: otherwise, if you set loose: false and then keep the selectiveLoose option as it, I think it should then run as we expect by only destructuring the functions that match those given on the selectiveLoose list loosely.

[EivindArvesen]

@lvl99 Updated.

Where do we go from here, considering that changes will need to be merged into Babel before this is usable?

[lvl99]

@eivind88 not sure! Maybe we could post comments on the PR and try and get others like @gaearon to help get it assessed for appropriateness and (hopefully) merged into Babel.

[EivindArvesen]

@iansu Any thoughts?😃

[iansu]

We are also going to want to add this rule: "react-hooks/exhaustive-deps": "warn"

[EivindArvesen]

@iansu: Like so?

[iansu]

A stable version of eslint-plugin-react-hooks has just been released. Can you update your PR to use version 1.5.0? Once that’s done I think we’re ready to merge.

[EivindArvesen]

Done!

[iansu]

Thanks! I'm just looking into the unit test failures. They're not related to your changes but I'd like to fix them before we merge.

[ianschmitz]

I think there's overlap with the babel plugin here and the work being done in #6219? If so we probably want to remove that change from this PR and focus on the ESLint plugin side of things.

[iansu]

@ianschmitz Are you referring to the loose mode destructuring part? I don't think #6219 is going to make it into 3.0 so I'm thinking we include this for now and then remove it in #6219. What do you think?

[ianschmitz]

@iansu yes i'm referring to the babel plugin that was added here. If we don't think #6219 will make it in for 3.0 then it probably makes sense to include it and later remove like you said.

[petetnt]

Small comment, otherwise codewise LGTM

[iansu]

Thanks!