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

[ESLint] Check deps when callback body is outside the Hook call, too #18435

Merged
merged 3 commits into from
Mar 31, 2020

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon commented Mar 30, 2020

Fixes #16573.

We didn't use to check calls like useEffect(effectBody, []) at all. That was dangerous. Now we do.

The first commit is a refactor so that we scan any arbitrary function for deps, rather than a direct child of a Hook call. The second commit uses it to check cases like useEffect(effectBody, []) if effectBody is declared locally. If the effect body is declared outside a render scope, we don't complain. If it's passed as a prop or if we can't analyze it statically for some other way, we ask you to write it inline or to include it in deps.

This is an alternative to #17443. I initially tried to build on that, but I wanted to add more heuristics and needed to refactor more significantly.

Instead of visiting the functions and looking up to see if they're in a Hook call, visit Hook calls and look down to see if there's a callback inside. I will need this refactor so I can visit functions declared outside the call.
@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Mar 30, 2020
@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 30, 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 4bd4339:

Sandbox Source
distracted-noyce-ow2ki Configuration

@sizebot
Copy link

sizebot commented Mar 30, 2020

Details of bundled changes.

Comparing: ba31ad4...4bd4339

eslint-plugin-react-hooks

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
eslint-plugin-react-hooks.development.js +4.3% +4.1% 76.77 KB 80.04 KB 17.51 KB 18.24 KB NODE_DEV
eslint-plugin-react-hooks.production.min.js 🔺+3.9% 🔺+3.3% 20.99 KB 21.82 KB 7.12 KB 7.35 KB NODE_PROD

Size changes (experimental)

Generated by 🚫 dangerJS against 4bd4339

@sizebot
Copy link

sizebot commented Mar 30, 2020

Details of bundled changes.

Comparing: ba31ad4...4bd4339

eslint-plugin-react-hooks

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
eslint-plugin-react-hooks.development.js +4.3% +4.1% 76.76 KB 80.03 KB 17.51 KB 18.23 KB NODE_DEV
eslint-plugin-react-hooks.production.min.js 🔺+4.0% 🔺+3.3% 20.98 KB 21.81 KB 7.11 KB 7.34 KB NODE_PROD

Size changes (stable)

Generated by 🚫 dangerJS against 4bd4339

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[react-hooks/exhaustive-deps] missed warning when passing a function
4 participants