yarn add -D @wogns3623/eslint-plugin-better-exhaustive-depsor
pnpm i -D @wogns3623/eslint-plugin-better-exhaustive-depsor
npm i -D @wogns3623/eslint-plugin-better-exhaustive-depsTo use this plugin, you must disable original react-hooks/exhaustive-deps rule
module.exports = {
// ...
plugins: ["@wogns3623/better-exhaustive-deps"],
rules: {
"react-hooks/exhaustive-deps": "off",
}
// ...
}Check variable memoized by useCallback or useMemo is static.
If Deps is empty or filled with static variable, the return value is also treated as a static variable.
module.exports = {
// ...
plugins: ["@wogns3623/better-exhaustive-deps"],
rules: {
// disable original rule
"react-hooks/exhaustive-deps": "off",
"@wogns3623/better-exhaustive-deps/exhaustive-deps": [
"warn",
{
checkMemoizedVariableIsStatic: true,
},
],
},
// ...
};Return values registered as true are treated as static variable.
Can configure destructured value independently.
module.exports = {
// ...
plugins: ["@wogns3623/better-exhaustive-deps"],
rules: {
// disable original rule
"react-hooks/exhaustive-deps": "off",
"@wogns3623/better-exhaustive-deps/exhaustive-deps": [
"warn",
{
staticHooks: {
useCustomRef: true,
useSomething: [false, true],
useSomethingOther: {
value: false,
callback: true
},
},
},
],
},
// ...
};use grncdr's code facebook/react#16873 (comment)
- Check callback generated by useCallback is immutable
- Create a rule to check for unnecessary static (stable) values in dependency list.
- Add presets for popular React libraries
- Add automatic inference for whether a custom hook return value is static or not