facebook
[eslint-plugin-react-hooks] Add option requireUseEffectDependencyArray
New lint option requireUseEffectDependencyArray
I propose adding a new option to react-hooks/exhaustive-deps lint rule. When specifying "requireUseEffectDependencyArray": true, a lint error is raised if the second argument to useEffect is omitted. This is intended to prevent accidentally writing effects which re-run on every render.
Motivation
Recently I was investigating a spike of logging requests in production at Faire and discovered that the source was inside a useEffect which did not have a dependency array. The logging was supposed to happen only once when the component mounted, but instead was sent repeatedly on every render.
After reviewing a few hundred useEffect usages in Faire's repos, I found that this was a frequent mistake. There were a number of other useEffect calls that accidentally omitted the dependency array. In our code, it is very rare (only about 1 in 100) that we intentionally want an effect to re-run after every render. Having a lint rule to catch these mistakes will prevent incidents like the traffic spike mentioned above.
How did you test this change?
- Added tests and ran
yarn test ESLintRuleExhaustiveDeps - Installed
eslint-plugin-react-hookslocally and tested with internal Faire repos- All new lint errors were valid cases of missing dependency array.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| react-compiler-playground | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Aug 8, 2024 7:34pm |
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!