Skip to content

[ESLint] Enforce deps array in useMemo and useCallback #15025

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 1 commit into from
Mar 6, 2019

Conversation

gaearon
Copy link
Collaborator

@gaearon gaearon commented Mar 5, 2019

They serve no purpose without a deps array. We have a similar rule on internally and it caught mistakes.

function MyComponent(props) {
  const value = useMemo(() => { return 2*2; }); // Warning
  const fn = useCallback(() => { alert('foo'); }); // Warning
}

We still allow it from type perspective. In the future we might have a smart compiler that fills them in. But if you use this rule, you're doing it manually so you should be aware when your optimization doesn't work.

This is also a missing piece for the useCallback enforcement thing I'm working on separately. I'll send another PR for that.

@sizebot
Copy link

sizebot commented Mar 5, 2019

Details of bundled changes.

Comparing: fa5d4ee...ef382a2

eslint-plugin-react-hooks

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
eslint-plugin-react-hooks.development.js +0.6% +0.7% 60.84 KB 61.18 KB 14.06 KB 14.16 KB NODE_DEV
eslint-plugin-react-hooks.production.min.js 🔺+1.0% 🔺+1.2% 15.11 KB 15.27 KB 5.25 KB 5.31 KB NODE_PROD
ESLintPluginReactHooks-dev.js +0.7% +0.8% 64.79 KB 65.21 KB 14.42 KB 14.54 KB FB_WWW_DEV

Generated by 🚫 dangerJS

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants