[d565449] | 1 | # `eslint-plugin-react-hooks`
|
---|
| 2 |
|
---|
| 3 | This ESLint plugin enforces the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html).
|
---|
| 4 |
|
---|
| 5 | It is a part of the [Hooks API](https://reactjs.org/docs/hooks-intro.html) for React.
|
---|
| 6 |
|
---|
| 7 | ## Installation
|
---|
| 8 |
|
---|
| 9 | **Note: If you're using Create React App, please use `react-scripts` >= 3 instead of adding it directly.**
|
---|
| 10 |
|
---|
| 11 | Assuming you already have ESLint installed, run:
|
---|
| 12 |
|
---|
| 13 | ```sh
|
---|
| 14 | # npm
|
---|
| 15 | npm install eslint-plugin-react-hooks --save-dev
|
---|
| 16 |
|
---|
| 17 | # yarn
|
---|
| 18 | yarn add eslint-plugin-react-hooks --dev
|
---|
| 19 | ```
|
---|
| 20 |
|
---|
| 21 | Then extend the recommended eslint config:
|
---|
| 22 |
|
---|
| 23 | ```js
|
---|
| 24 | {
|
---|
| 25 | "extends": [
|
---|
| 26 | // ...
|
---|
| 27 | "plugin:react-hooks/recommended"
|
---|
| 28 | ]
|
---|
| 29 | }
|
---|
| 30 | ```
|
---|
| 31 |
|
---|
| 32 | ### Custom Configuration
|
---|
| 33 |
|
---|
| 34 | If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:
|
---|
| 35 |
|
---|
| 36 | ```js
|
---|
| 37 | {
|
---|
| 38 | "plugins": [
|
---|
| 39 | // ...
|
---|
| 40 | "react-hooks"
|
---|
| 41 | ],
|
---|
| 42 | "rules": {
|
---|
| 43 | // ...
|
---|
| 44 | "react-hooks/rules-of-hooks": "error",
|
---|
| 45 | "react-hooks/exhaustive-deps": "warn"
|
---|
| 46 | }
|
---|
| 47 | }
|
---|
| 48 | ```
|
---|
| 49 |
|
---|
| 50 |
|
---|
| 51 | ## Advanced Configuration
|
---|
| 52 |
|
---|
| 53 | `exhaustive-deps` can be configured to validate dependencies of custom Hooks with the `additionalHooks` option.
|
---|
| 54 | This option accepts a regex to match the names of custom Hooks that have dependencies.
|
---|
| 55 |
|
---|
| 56 | ```js
|
---|
| 57 | {
|
---|
| 58 | "rules": {
|
---|
| 59 | // ...
|
---|
| 60 | "react-hooks/exhaustive-deps": ["warn", {
|
---|
| 61 | "additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
|
---|
| 62 | }]
|
---|
| 63 | }
|
---|
| 64 | }
|
---|
| 65 | ```
|
---|
| 66 |
|
---|
| 67 | 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.
|
---|
| 68 |
|
---|
| 69 | ## Valid and Invalid Examples
|
---|
| 70 |
|
---|
| 71 | Please refer to the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) documentation and the [Hooks FAQ](https://reactjs.org/docs/hooks-faq.html#what-exactly-do-the-lint-rules-enforce) to learn more about this rule.
|
---|
| 72 |
|
---|
| 73 | ## License
|
---|
| 74 |
|
---|
| 75 | MIT
|
---|