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

fix(eslint-plugin-react-hooks): Support optional chaining when accessing prototype method inside useCallback and useMemo #19061 #19062

Merged
merged 3 commits into from
Jun 30, 2020

Conversation

fredvollmer
Copy link
Contributor

@fredvollmer fredvollmer commented Jun 1, 2020

Relates to #19061

Summary

This fix ensures that optional chaining can be used to access a prototype method of an object, inside a useCallback or useEffect hook.

For example, assume we use optional chaining to call the toString() method of an object:

foo?.toString();

In such a case, foo, not foo?.toString, should be added to the dependencies array of the useCallback or useMemo hooks. However, doing so currently throws a false "unnecessary dependencies" warning.

Test Plan

Additional tests were added to cover using the optional chaining operator in the useCallback and useMemo hooks, when only a prefix of the object path is provided (as it would be if a prototype method is being referenced in the callback.)

@facebook-github-bot
Copy link

Hi @fredvollmer!

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 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 to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 1, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fb8040d:

Sandbox Source
nifty-panini-mp99j Configuration

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 1, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d9a6766:

Sandbox Source
brave-christian-hllxg Configuration

@sizebot
Copy link

sizebot commented Jun 1, 2020

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against d9a6766

@sizebot
Copy link

sizebot commented Jun 1, 2020

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against d9a6766

@facebook-github-bot
Copy link

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

satisfyingPaths.add(path);
// Here we only want to compare the "normalized" path, without any optional chaining ("?.") operator
// foo?.bar -> foo.bar
satisfyingPaths.add(path.replace(/\?$/, ''));
Copy link
Contributor

@coolkev coolkev Jun 3, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same change should be made below when adding path to missingPaths (line 1304). Version 4.04 is now getting an eslint error:
ESLint stack trace:
[Error - 4:20:28 PM] TypeError: Cannot read property 'references' of undefined
Issue #19043

Your same change to missingPaths fixes that error.

missingPaths.add(path.replace(/\?$/, ''));

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch! Just made this change.

Copy link
Contributor

@coolkev coolkev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great

@nathggns
Copy link

nathggns commented Jun 5, 2020

Do we know when this might get merged?

@mdestagnol
Copy link

Hi! Looks like the change is approved. Is there a reason why it's not merged yet?

@tcodes0
Copy link

tcodes0 commented Jun 18, 2020

Running into this error too.

@coolkev
Copy link
Contributor

coolkev commented Jun 25, 2020

@gaearon, any chance we can get this merged/deployed? It is breaking eslint completely for me when it occurs. The issue was introduced in PR #19008

@gaearon
Copy link
Collaborator

gaearon commented Jun 30, 2020

Out in eslint-plugin-react-hooks@4.0.5

@krailler
Copy link

On eslint-plugin-react-hooks@4.0.5 with ESLint 7.3.1 is not working for me...

The error "TypeError: Cannot read property 'references' of undefined" appears.

Any thoughts?

@gaearon
Copy link
Collaborator

gaearon commented Jun 30, 2020

File a new issue with code causing it.

@facebook facebook locked as resolved and limited conversation to collaborators Jun 30, 2020
@gaearon
Copy link
Collaborator

gaearon commented Jun 30, 2020

Locking so we don't have to track discussion in a merged PR. If there is a new problem, please file a new issue.

@gaearon
Copy link
Collaborator

gaearon commented Jul 7, 2020

Optional chaining problems should be fixed in eslint-plugin-react-hooks@4.0.6. If you experience some problem with optional chaining after 4.0.6, please file a new issue. Thanks.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants