Support React Hooks (#5602) (#5997)

* Add Babel plug-in for Hooks; Add ESLint plug-in for Hooks (WIP)

* Fix transform destructuring loose config

* Add eslint-plugin-react-hooks to package.json

* Fix package.json's

* Fix eslint-plugin-react-hooks version

* Fix package.json

* Fix package.json

* Add eslint-plugin-react-hooks to script package.json

* Force array destructuring to work in loose mode only for known Hooks

* Update based on feedback from PR

* Add 'exhaustive-deps' lint rule

* Bump eslint-plugin-react-hooks to stable version

* Remove extraneous dependency from react-scripts

Author: EivindArvesen

packages/babel-preset-react-app/create.js

@@ -117,7 +117,26 @@ module.exports = function(api, opts, env) {
       // Necessary to include regardless of the environment because
       // in practice some other transforms (such as object-rest-spread)
       // don't work without it: https://github.com/babel/babel/issues/7215
-      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-transform-destructuring').default,
+        {
+          // Use loose mode for performance:
+          // https://github.com/facebook/create-react-app/issues/5602
+          loose: false,
+          selectiveLoose: [
+            'useState',
+            'useEffect',
+            'useContext',
+            'useReducer',
+            'useCallback',
+            'useMemo',
+            'useRef',
+            'useImperativeHandle',
+            'useLayoutEffect',
+            'useDebugValue',
+          ],
+        },
+      ],
       // Turn on legacy decorators for TypeScript files
       isTypeScriptEnabled && [
         require('@babel/plugin-proposal-decorators').default,

packages/eslint-config-react-app/README.md

@@ -19,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create
 First, install this package, ESLint and the necessary plugins.
 
 ```sh
-npm install --save-dev eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x
+npm install --save-dev eslint-config-react-app babel-eslint@9.x eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@1.5.0
 ```
 
 Then create a file named `.eslintrc.json` with following contents in the root folder of your project:

packages/eslint-config-react-app/index.js

@@ -28,7 +28,7 @@ module.exports = {
 
   parser: 'babel-eslint',
 
-  plugins: ['import', 'flowtype', 'jsx-a11y', 'react'],
+  plugins: ['import', 'flowtype', 'jsx-a11y', 'react', 'react-hooks'],
 
   env: {
     browser: true,
@@ -161,6 +161,7 @@ module.exports = {
     ],
     'no-with': 'warn',
     'no-whitespace-before-property': 'warn',
+    'react-hooks/exhaustive-deps': 'warn',
     'require-yield': 'warn',
     'rest-spread-spacing': ['warn', 'never'],
     strict: ['warn', 'never'],
@@ -241,6 +242,9 @@ module.exports = {
     'jsx-a11y/role-supports-aria-props': 'warn',
     'jsx-a11y/scope': 'warn',
 
+    // https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
+    'react-hooks/rules-of-hooks': 'error',
+
     // https://github.com/gajus/eslint-plugin-flowtype
     'flowtype/define-flow-type': 'warn',
     'flowtype/require-valid-file-annotation': 'warn',

packages/eslint-config-react-app/package.json

@@ -16,7 +16,8 @@
     "eslint-plugin-flowtype": "2.x",
     "eslint-plugin-import": "2.x",
     "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-react": "7.x"
+    "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-hooks": "1.5.0"
   },
   "dependencies": {
     "confusing-browser-globals": "^1.0.6"

packages/react-scripts/package.json

@@ -44,6 +44,7 @@
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-react": "7.12.4",
+    "eslint-plugin-react-hooks": "1.5.0",
     "file-loader": "3.0.1",
     "fs-extra": "7.0.1",
     "html-webpack-plugin": "4.0.0-beta.5",