Jordan Eldredge
1d5e10f703
* [eslint-plugin-react-cooks] Report constant constructions The dependency array passed to a React hook can be thought of as a list of cache keys. On each render, if any dependency is not `===` its previous value, the hook will be rerun. Constructing a new object/array/function/etc directly within your render function means that the value will be referentially unique on each render. If you then use that value as a hook dependency, that hook will get a "cache miss" on every render, making the dependency array useless. This can be especially dangerous since it can cascade. If a hook such as `useMemo` is rerun on each render, not only are we bypassing the option to avoid potentially expensive work, but the value _returned_ by `useMemo` may end up being referentially unique on each render causing other downstream hooks or memoized components to become deoptimized. * Fix/remove existing tests * Don't give an autofix of wrapping object declarations It may not be safe to just wrap the declaration of an object, since the object may get mutated. Only offer this autofix for functions which are unlikely to get mutated. Also, update the message to clarify that the entire construction of the value should get wrapped. * Handle the long tail of nodes that will be referentially unique * Catch let/var constant constructions on initial assignment * Trim trailing whitespace * Address feedback from @gaearon * Rename "assignment" to "initialization" * Add test for a constant construction used in multiple dependency arrays
eslint-plugin-react-hooks
This ESLint plugin enforces the Rules of Hooks.
It is a part of the Hooks API for React.
Installation
Note: If you're using Create React App, please use react-scripts >= 3 instead of adding it directly.
Assuming you already have ESLint installed, run:
# npm
npm install eslint-plugin-react-hooks --save-dev
# yarn
yarn add eslint-plugin-react-hooks --dev
Then extend the recommended eslint config:
{
"extends": [
// ...
"plugin:react-hooks/recommended"
]
}
Custom Configuration
If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
}
Advanced Configuration
exhaustive-deps can be configured to validate dependencies of custom Hooks with the additionalHooks option.
This option accepts a regex to match the names of custom Hooks that have dependencies.
{
"rules": {
// ...
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
}]
}
}
We suggest to use this option very sparingly, if at all. Generally saying, we recommend most custom Hooks to not use the dependencies argument, and instead provide a higher-level API that is more focused around a specific use case.
Valid and Invalid Examples
Please refer to the Rules of Hooks documentation and the Hooks FAQ to learn more about this rule.
License
MIT