feat(react): add hooks rules

README.md

@@ -100,7 +100,7 @@ module.exports = {
 
 **terminal**
 ```sh
-yarn add eslint-plugin-react --dev
+yarn add eslint-plugin-react eslint-plugin-react-hooks --dev
 ```
 
 **.eslintrc.js**
@@ -139,7 +139,7 @@ module.exports = {
 
 **terminal**
 ```sh
-yarn add eslint-plugin-flowtype eslint-plugin-react --dev
+yarn add eslint-plugin-flowtype eslint-plugin-react eslint-plugin-react-hooks --dev
 ```
 
 **.eslintrc.js**
@@ -189,7 +189,7 @@ module.exports = {
 
 **terminal**
 ```sh
-yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react --dev
+yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript eslint-plugin-react eslint-plugin-react-hooks --dev
 ```
 
 **.eslintrc.js**

react.js

@@ -6,5 +6,5 @@ module.exports = {
     './base.js',
     'prettier/react',
   ],
-  plugins: ['react'],
+  plugins: ['react', 'react-hooks'],
 };

rules/react.js

@@ -10,5 +10,7 @@ module.exports = {
         allowArrowFunctions: true,
       },
     ],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
   },
 };

sample-project/package.json

@@ -25,6 +25,7 @@
     "eslint-plugin-jest": "21.27.2",
     "eslint-plugin-prettier": "2.7.0",
     "eslint-plugin-react": "7.7.0",
+    "eslint-plugin-react-hooks": "2.1.2",
     "prettier": "1.18.2"
   }
 }

sample-project/src/Component.js

@@ -0,0 +1,18 @@
+import React, { useEffet } from 'react';
+import PropTypes from 'prop-types';
+
+export function Component({ value }) {
+  // Wrapping the effect with a condition triggers the ESLint plugin `react-hooks`
+  useEffet(() => {});
+
+  return (
+    <div>
+      <h1>React app</h1>
+      <p>{value}</p>
+    </div>
+  );
+}
+
+Component.propTypes = {
+  value: PropTypes.string,
+};

sample-project/yarn.lock

@@ -463,6 +463,11 @@ eslint-plugin-prettier@2.7.0:
     fast-diff "^1.1.1"
     jest-docblock "^21.0.0"
 
+eslint-plugin-react-hooks@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.1.2.tgz#1358d2acb2c5e02b7e90c37e611ac258a488e3a7"
+  integrity sha512-ZR+AyesAUGxJAyTFlF3MbzeVHAcQTFQt1fFVe5o0dzY/HFoj1dgQDMoIkiM+ltN/HhlHBYX4JpJwYonjxsyQMA==
+
 eslint-plugin-react@7.7.0:
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz#f606c719dbd8a1a2b3d25c16299813878cca0160"