Gathering detailed insights and metrics for eslint-plugin-react-hooks-addons
Gathering detailed insights and metrics for eslint-plugin-react-hooks-addons
Gathering detailed insights and metrics for eslint-plugin-react-hooks-addons
Gathering detailed insights and metrics for eslint-plugin-react-hooks-addons
ESLint rule to check potentially unintended dependencies in the useEffect hook.
npm install eslint-plugin-react-hooks-addons
Typescript
Module System
Node Version
NPM Version
85.2
Supply Chain
92
Quality
76.2
Maintenance
100
Vulnerability
98.9
License
JavaScript (53.87%)
TypeScript (46.13%)
Total Downloads
1,580,501
Last Day
279
Last Week
13,375
Last Month
63,903
Last Year
668,978
MIT License
15 Stars
73 Commits
2 Forks
1 Watchers
6 Branches
1 Contributors
Updated on Jun 29, 2025
Minified
Minified + Gzipped
Latest Version
0.5.0
Package Id
eslint-plugin-react-hooks-addons@0.5.0
Unpacked Size
11.41 kB
Size
4.36 kB
File Count
8
NPM Version
10.9.2
Node Version
22.14.0
Published on
Apr 21, 2025
Cumulative downloads
Total Downloads
Last Day
187.6%
279
Compared to previous day
Last Week
-3.2%
13,375
Compared to previous week
Last Month
5.6%
63,903
Compared to previous month
Last Year
-4.8%
668,978
Compared to previous year
ESLint rule to check unused and potentially unnecessary dependencies in React Hooks.
eslint-plugin-react-hooks is awesome for linting the dependency array of React Hooks. But it doesn't do one thing: unused dependencies in the useEffect
or useLayoutEffect
hooks are not reported. Unused variables in useEffect
's dependency array are perfectly valid in some use cases. However, they might be unnecessary in some other cases which cause the effect hook to run unintentionally.
Take the following code as an example:
1const [user1, setUser1] = useState(); 2const [user2, setUser2] = useState(); 3 4useEffect(() => { 5 fetch(`someUrl/${user1}`).then(/* ... */); 6 fetch(`someUrl/${user2}`).then(/* ... */); 7}, [user1, user2]);
Next day you update the code and remove the second fetch
but forget to remove user2
from the dependency array:
1const [user1, setUser1] = useState(); 2const [user2, setUser2] = useState(); 3 4useEffect(() => { 5 fetch(`someUrl/${user1}`).then(/* ... */); 6}, [user1, user2]);
Then the useEffect
will run whenever user1
or user2
changes, which is probably not your intention. Similar errors occur more frequently when the hook callback function is large and there is a long dependency array. This eslint plugin checks and reports this kind of error.
What if I have a value which is not used in the hook function scope but I want the effect hook to run whenever that value has changed?
You could prepend a /* effect dep */
comment to the value in dependency array then it will be skipped during linting. It brings an addition benefit: the value is explicitly marked as effectful so that other people coming across the code will understand it's not a programmatic error.
1useEffect(() => { 2 fetch(`someUrl/${user1}`).then(/* ... */); 3- }, [user1, user2]); 4+ }, [user1, /* effect dep */ user2]);
with npm
1npm install -D eslint-plugin-react-hooks-addons
or with Yarn
1yarn add -D eslint-plugin-react-hooks-addons
1import reactHooksAddons from 'eslint-plugin-react-hooks-addons'; 2 3export default [ 4 reactHooksAddons.configs.recommended 5 // other configs... 6];
Or, use a custom configuration:
1import reactHooksAddons from 'eslint-plugin-react-hooks-addons'; 2 3export default [ 4 // other configs... 5 { 6 plugins: { 7 'react-hooks-addons': reactHooksAddons 8 }, 9 rules: { 10 'react-hooks-addons/no-unused-deps': 'warn' 11 } 12 } 13];
1{ 2 "extends": ["plugin:react-hooks-addons/recommended-legacy"] 3}
Or, use a custom configuration:
1{ 2 "plugins": ["react-hooks-addons"], 3 "rules": { 4 "react-hooks-addons/no-unused-deps": "warn" 5 } 6}
Explicitly mark a dependency as effectful with /* effect dep */
comment:
1useEffect(() => { 2 // ... 3}, [unusedVar, /* effect dep */ effectVar]);
Then only the unusedVar
will be reported as an unused dependency.
effectComment
You can use a different comment to mark dependencies as effectful:
1"rules": { 2 "react-hooks-addons/no-unused-deps": [ 3 "warn", 4 { 5 "effectComment": "effectful" 6 } 7 ] 8}
additionalHooks
The rule checks useEffect
and useLayoutEffect
hooks by default. It can be configured to check dependencies of custom hooks with the additionalHooks
option. This option accepts a pattern
key which is a regex pattern. If you set the replace
key to true
, it would replace the default hooks.
1"rules": { 2 "react-hooks-addons/no-unused-deps": [ 3 "warn", 4 { 5 "additionalHooks": { 6 "pattern": "useMyCustomHook|useMyOtherCustomHook", 7 "replace": true 8 } 9 } 10 ] 11}
Note: this eslint plugin is supposed to work in tandem with eslint-plugin-react-hooks, as it doesn't check things that have already been reported by that plugin.
MIT Licensed.
No vulnerabilities found.
No security vulnerabilities found.