diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js index a0423f2551c..d6019b5abc3 100644 --- a/packages/babel-preset-react-app/create.js +++ b/packages/babel-preset-react-app/create.js @@ -126,7 +126,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, diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index e0c4cc3d1ef..7cf509d98d9 100644 --- a/packages/eslint-config-react-app/README.md +++ b/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: diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index f83ed06a104..f69e53aacd1 100644 --- a/packages/eslint-config-react-app/index.js +++ b/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', diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index dbfa2bf4c96..0da1eb67790 100644 --- a/packages/eslint-config-react-app/package.json +++ b/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" diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index a5aaccf0b3d..ee1a97c91d8 100644 --- a/packages/react-scripts/package.json +++ b/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",