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
|
---|