Lauren TanandDan Abramov
cb5084d1c4
* [ESLint] Check useEvent references instead Previously the useEvent check in RulesOfHooks would collect all definitions of useEvent functions at the top level, record them as violations, then clear those violations if the useEvent function was later called or referened inside of an effect or another event. The flaw with this approach was in the special case where useEvent functions could be passed by reference inside of effects or events. The violation would be cleared here (since it was called at least once) and subsequent usages of the useEvent function would not be properly checked. This PR changes it so we check all identifiers that resolve to a useEvent function, and if they are not in an effect or event must be called or a lint error is emitted. Co-authored-by: Dan Abramov <dan.abramov@gmail.com> * Add comment Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
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