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.

Sign up for GitHub

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

Jump to bottom

react-hooks/exhaustive-deps: Handle optional chained methods as dependency (#20204) #20247

Merged
merged 1 commit into from
Mar 24, 2021
Merged

react-hooks/exhaustive-deps: Handle optional chained methods as dependency (#20204) #20247

merged 1 commit into from
Mar 24, 2021

Conversation

AriPerkkio
Copy link
Contributor

Summary

Fixes #20204.

Dependency array parsing crashes when it encounters optional-chained function calls, e.g. props?.attribute.method().

Given:

useEffect(() => {}, [someObject?.optionalField.method()]);

Expected:

  • React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked.

Actual:

  • Cannot read property 'type' of undefined
  • No lint errors are displayed due to linter crash

Test Plan

Unit tests:

  • Added missing test for checking function call as dependency: [props.method()]
  • Added test validating fix. Contains optional-chained function call: [props?.attribute.method()]

Regression:

  • Linted 164 repositories before and after the fix. The only change was that the previously crashing file was no more crashing. Every other lint warning was as before.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 13, 2020 •
edited
Loading

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 4f843be:

Sandbox Source
React Configuration

@sizebot
Copy link

sizebot commented Nov 13, 2020 •
edited
Loading

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 4f843be

@sizebot
Copy link

sizebot commented Nov 13, 2020 •
edited
Loading

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against 4f843be

@AriPerkkio AriPerkkio force-pushed the fix/eslint-plugin-react-hooks-crash branch from 0b003e9 to 26aa562 Compare December 2, 2020 05:09
@AriPerkkio AriPerkkio force-pushed the fix/eslint-plugin-react-hooks-crash branch from 26aa562 to 4f843be Compare December 2, 2020 05:13
@gaearon gaearon merged commit eb58c39 into facebook:master Mar 24, 2021
@gaearon
Copy link
Collaborator

gaearon commented Mar 24, 2021

Thanks.

@maksbotan
Copy link

I tried installing version 0.0.0-experimental-7b84dbd16 from npm, which is supposed to contain this fix, but looks like it doesn't. Did CI fail to pick correct commit or do I misunderstand something?

You can see for yourself in https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-0.0.0-7b84dbd16.tgz, compiled file package/cjs/eslint-plugin-react-hooks.development.js does not contain these changes.

@gaearon
Copy link
Collaborator

gaearon commented Mar 25, 2021

Isn’t 7b84d an earlier commit? Wait another day for a release.

@maksbotan
Copy link

Oh, sorry, I must've confused something while comparing hashes in my head. Thanks!

facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Apr 6, 2021
@kacieb @facebook-github-bot
React Native sync for revisions 6d3ecb7...c9aab1c
2785ce7 
Summary:
This sync includes the following changes:
- **[c9aab1c9d](facebook/react@c9aab1c9d )**: react-refresh@0.10.0 //<Dan Abramov>//
- **[516b76b9a](facebook/react@516b76b9a )**: [Fast Refresh] Support callthrough HOCs ([#21104](facebook/react#21104)) //<Dan Abramov>//
- **[0853aab74](facebook/react@0853aab74 )**: Log all errors to console.error by default ([#21130](facebook/react#21130)) //<Sebastian Markbåge>//
- **[d1294c9d4](facebook/react@d1294c9d4 )**: Add global onError handler ([#21129](facebook/react#21129)) //<Sebastian Markbåge>//
- **[64983aab5](facebook/react@64983aab5 )**: Remove redundant setUpdatePriority call ([#21127](facebook/react#21127)) //<Andrew Clark>//
- **[634cc52e6](facebook/react@634cc52e6 )**: Delete dead variable: currentEventWipLanes ([#21123](facebook/react#21123)) //<Andrew Clark>//
- **[1102224bb](facebook/react@1102224bb )**: Fix: flushSync changes priority inside effect ([#21122](facebook/react#21122)) //<Andrew Clark>//
- **[dbe98a5aa](facebook/react@dbe98a5aa )**: Move sync task queue to its own module ([#21109](facebook/react#21109)) //<Andrew Clark>//
- **[3ba5c8737](facebook/react@3ba5c8737 )**: Remove Scheduler indirection ([#21107](facebook/react#21107)) //<Andrew Clark>//
- **[46b68eaf6](facebook/react@46b68eaf6 )**: Delete LanePriority type ([#21090](facebook/react#21090)) //<Andrew Clark>//
- **[dcd13045e](facebook/react@dcd13045e )**: Use Lane to track root callback priority ([#21089](facebook/react#21089)) //<Andrew Clark>//
- **[5f21a9fca](facebook/react@5f21a9fca )**: Clean up host pointers in level 2 of clean-up flag ([#21112](facebook/react#21112)) //<Andrew Clark>//
- **[32d6f39ed](facebook/react@32d6f39ed )**: [Fizz] Support special HTML/SVG/MathML tags to suspend ([#21113](facebook/react#21113)) //<Sebastian Markbåge>//
- **[a77dd13ed](facebook/react@a77dd13ed )**: Delete enableDiscreteEventFlushingChange ([#21110](facebook/react#21110)) //<Andrew Clark>//
- **[048ee4c0c](facebook/react@048ee4c0c )**: Use `act` in fuzz tester to flush expired work ([#21108](facebook/react#21108)) //<Andrew Clark>//
- **[556644e23](facebook/react@556644e23 )**: Fix plurals ([#21106](facebook/react#21106)) //<Sebastian Markbåge>//
- **[8b741437b](facebook/react@8b741437b )**: Rename SuspendedWork to Task ([#21105](facebook/react#21105)) //<Sebastian Markbåge>//
- **[38a1aedb4](facebook/react@38a1aedb4 )**: [Fizz] Add FormatContext and Refactor Work ([#21103](facebook/react#21103)) //<Sebastian Markbåge>//
- **[1b7e471b9](facebook/react@1b7e471b9 )**: React Native New Architecture: Support passing nativeViewTag to getInspectorDataForViewAtPoint callback, for React DevTools compat ([#21080](facebook/react#21080)) //<Joshua Gross>//
- **[4a99c5c3a](facebook/react@4a99c5c3a )**: Use highest priority lane to detect interruptions ([#21088](facebook/react#21088)) //<Andrew Clark>//
- **[77be52729](facebook/react@77be52729 )**: Remove LanePriority from computeExpirationTime ([#21087](facebook/react#21087)) //<Andrew Clark>//
- **[3221e8fba](facebook/react@3221e8fba )**: Remove LanePriority from getBumpedLaneForHydration ([#21086](facebook/react#21086)) //<Andrew Clark>//
- **[05ec0d764](facebook/react@05ec0d764 )**: Entangled expired lanes with SyncLane ([#21083](facebook/react#21083)) //<Andrew Clark>//
- **[03ede83d2](facebook/react@03ede83d2 )**: Use EventPriority to track update priority ([#21082](facebook/react#21082)) //<Andrew Clark>//
- **[a63f0953b](facebook/react@a63f0953b )**: Delete SyncBatchedLane ([#21061](facebook/react#21061)) //<Ricky>//
- **[fa868d6be](facebook/react@fa868d6be )**: Make opaque EventPriority type a Lane internally ([#21065](facebook/react#21065)) //<Andrew Clark>//
- **[eb58c3909](facebook/react@eb58c3909 )**: react-hooks/exhaustive-deps: Handle optional chained methods as dependency ([#20204](facebook/react#20204)) ([#20247](facebook/react#20247)) //<Ari Perkkiö>//
- **[7b84dbd16](facebook/react@7b84dbd16 )**: Fail build on deep requires in npm packages ([#21063](facebook/react#21063)) //<Dan Abramov>//
- **[2c9d8efc8](facebook/react@2c9d8efc8 )**: Add react-reconciler/constants entry point ([#21062](facebook/react#21062)) //<Dan Abramov>//
- **[d0eaf7829](facebook/react@d0eaf7829 )**: Move priorities to separate import to break cycle ([#21060](facebook/react#21060)) //<Andrew Clark>//
- **[435cff986](facebook/react@435cff986 )**: [Fizz] Expose callbacks in options for when various stages of the content is done ([#21056](facebook/react#21056)) //<Sebastian Markbåge>//
- **[25bfa287f](facebook/react@25bfa287f )**: [Experiment] Add feature flag for more aggressive memory clean-up of deleted fiber trees ([#21039](facebook/react#21039)) //<Benoit Girard>//
- **[8fe7810e7](facebook/react@8fe7810e7 )**: Remove already completed comment ([#21054](facebook/react#21054)) //<Sebastian Markbåge>//
- **[6c3202b1e](facebook/react@6c3202b1e )**: [Fizz] Use identifierPrefix to avoid conflicts within the same response ([#21037](facebook/react#21037)) //<Sebastian Markbåge>//
- **[dcdf8de7e](facebook/react@dcdf8de7e )**: Remove discrete lanes and priorities ([#21040](facebook/react#21040)) //<Andrew Clark>//
- **[ca99ae97b](facebook/react@ca99ae97b )**: Replace some flushExpired callsites ([#20975](facebook/react#20975)) //<Ricky>//
- **[1fafac002](facebook/react@1fafac002 )**: Use SyncLane for discrete event hydration ([#21038](facebook/react#21038)) //<Andrew Clark>//

Changelog:
[General][Changed] - React Native sync for revisions 6d3ecb7...c9aab1c

jest_e2e[run_all_tests]

Reviewed By: JoshuaGross

Differential Revision: D27436763

fbshipit-source-id: da79a41e26bffdcdacd293178062edf098e9b58a
koto pushed a commit to koto/react that referenced this pull request Jun 15, 2021
@AriPerkkio @koto
react-hooks/exhaustive-deps: Handle optional chained methods as depen…
cb9b008 
…dency (facebook#20204) (facebook#20247)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@reinaldosimoes reinaldosimoes reinaldosimoes left review comments

@tigthor tigthor tigthor approved these changes

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Bug: eslint-plugin-react-hooks: Cannot read property 'type' of undefined at analyzePropertyChain
7 participants
@AriPerkkio @sizebot @gaearon @maksbotan @reinaldosimoes @tigthor @facebook-github-bot