ac4ac1f5a6
We need to be able to specify additional effect hooks for the RulesOfHooks lint rule
in order to allow useEffectEvent to be called by custom effects. ExhaustiveDeps
does this with a regex suppplied to the rule, but that regex is not accessible from
other rules.
This diff introduces a `react-eslint` entry you can put in the eslint settings that
allows you to specify custom effect hooks and share them across all rules.
This works like:
```
{
settings: {
'react-eslint': {
additionalEffectHooks: string,
},
},
}
```
The next diff allows useEffect to read from the same configuration.
----
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
Flat Config (eslint.config.js|ts)
>= 6.0.0
For users of 6.0 and beyond, add the recommended config.
// eslint.config.js
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';
export default defineConfig([
{
files: ["src/**/*.{js,jsx,ts,tsx}"],
plugins: {
'react-hooks': reactHooks,
},
extends: ['react-hooks/recommended'],
},
]);
5.2.0
For users of 5.2.0 (the first version with flat config support), add the recommended-latest config.
import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';
export default defineConfig([
{
files: ["src/**/*.{js,jsx,ts,tsx}"],
plugins: {
'react-hooks': reactHooks,
},
extends: ['react-hooks/recommended-latest'],
},
]);
Legacy Config (.eslintrc)
>= 5.2.0
If you are still using ESLint below 9.0.0, you can use recommended-legacy for accessing a legacy version of the recommended config.
{
"extends": [
// ...
"plugin:react-hooks/recommended-legacy"
]
}
< 5.2.0
If you're using a version earlier than 5.2.0, the legacy config was simply recommended.
{
"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:
Flat Config (eslint.config.js|ts)
import * as reactHooks from 'eslint-plugin-react-hooks';
export default [
{
files: ['**/*.{js,jsx}'],
plugins: { 'react-hooks': reactHooks },
// ...
rules: {
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
}
},
];
Legacy Config (.eslintrc)
{
"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 to learn more about this rule.
License
MIT