[eprh] Fix recommended config for flat config compatibility (#34700)

Previously, the `recommended` config used the legacy ESLint format
(plugins as an array of strings). This causes errors when used with
ESLint v9's `defineConfig()` helper. This was following [eslint's own
docs](https://eslint.org/docs/latest/extend/plugins#backwards-compatibility-for-legacy-configs):
> With this approach, both configuration systems recognize
"recommended". The old config system uses the recommended key while the
current config system uses the flat/recommended key. The defineConfig()
helper first looks at the recommended key, and if that is not in the
correct format, it looks for the flat/recommended key. This allows you
an upgrade path if you’d later like to rename flat/recommended to
recommended when you no longer need to support the old config system.
However,
[`isLegacyConfig()`](https://github.com/eslint/rewrite/blob/main/packages/config-helpers/src/define-config.js#L73-L81)
(also see
[`eslintrcKeys`](https://github.com/eslint/rewrite/blob/main/packages/config-helpers/src/define-config.js#L24-L35))
function doesn't check for the `plugins` key, so our config was
incorrectly treated as flat config despite being in legacy format.
This PR fixes the issue, along with a few other fixes combined:
1. Convert `recommended` to flat config format
2. Separate basic rules (exhaustive-deps, rules-of-hooks) from compiler
rules
3. Add `recommended-latest-legacy` config for non-flat config users who
want all recommended rules (including compiler rules)
4. Adding more types for the exported config
Our shipped presets in 6.x.x will essentially be:
- `recommended-legacy`: legacy (non-flat), with basic rules only
- `recommended-latest-legacy`: legacy (non-flat), all rules (basic +
compiler)
- `flat/recommended`: flat, basic rules only (now the same as
recommended, but to avoid making a breaking change we'll just keep it
around in 6.x.x)
- `recommended-latest`: flat, all rules (basic + compiler)
- `recommended`: flat, basic rules only
In the next breaking release 7.x.x, we will collapse down the presets
into three:
- `recommended-legacy`: all recommended rules
- `recommended`: all recommended rules
- `recommended-experimental`: all recommended rules + new bleeding edge
experimental rules
Closes#34679
---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34700).
* #34703
* __->__ #34700

Author: poteto

fixtures/eslint-v6/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v6/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v7/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v7/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v8/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v8/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v9/eslint.config.ts

@@ -1,8 +1,6 @@
 import{defineConfig}from'eslint/config';
 importreactHooksfrom'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
 exportdefaultdefineConfig([
 {
 languageOptions: {

fixtures/eslint-v9/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v6/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v6/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v7/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v7/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v8/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v8/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v9/eslint.config.ts

@@ -1,8 +1,6 @@
 import{defineConfig}from'eslint/config';
 importreactHooksfrom'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
 exportdefaultdefineConfig([
 {
 languageOptions: {

fixtures/eslint-v9/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v6/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v6/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v7/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v7/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v8/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v8/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v9/eslint.config.ts

@@ -1,8 +1,6 @@
 import{defineConfig}from'eslint/config';
 importreactHooksfrom'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
 exportdefaultdefineConfig([
 {
 languageOptions: {

fixtures/eslint-v9/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v6/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v6/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v7/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v7/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v8/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v8/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v9/eslint.config.ts

@@ -1,8 +1,6 @@
 import{defineConfig}from'eslint/config';
 importreactHooksfrom'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
 exportdefaultdefineConfig([
 {
 languageOptions: {

fixtures/eslint-v9/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v6/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v6/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v7/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v7/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v8/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v8/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v9/eslint.config.ts

@@ -1,8 +1,6 @@
 import{defineConfig}from'eslint/config';
 importreactHooksfrom'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
 exportdefaultdefineConfig([
 {
 languageOptions: {

fixtures/eslint-v9/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v6/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v6/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v7/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v7/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v8/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v8/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v9/eslint.config.ts

@@ -1,8 +1,6 @@
 import{defineConfig}from'eslint/config';
 importreactHooksfrom'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
 exportdefaultdefineConfig([
 {
 languageOptions: {

fixtures/eslint-v9/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v6/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v6/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v7/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v7/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v8/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v8/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v9/eslint.config.ts

@@ -1,8 +1,6 @@
 import{defineConfig}from'eslint/config';
 importreactHooksfrom'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
 exportdefaultdefineConfig([
 {
 languageOptions: {

fixtures/eslint-v9/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v6/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v6/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v7/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v7/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v8/.eslintrc.json

@@ -1,14 +1,11 @@
 {
 "root": true,
-"extends": ["plugin:react-hooks/recommended-legacy"],
+"extends": ["plugin:react-hooks/recommended-latest-legacy"],
 "parserOptions": {
 "ecmaVersion": 2020,
 "sourceType": "module",
 "ecmaFeatures": {
 "jsx": true
  }
- },
-"rules": {
-"react-hooks/exhaustive-deps": "error"
  }
 }

fixtures/eslint-v8/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}

fixtures/eslint-v9/eslint.config.ts

@@ -1,8 +1,6 @@
 import{defineConfig}from'eslint/config';
 importreactHooksfrom'eslint-plugin-react-hooks';
 
-console.log(reactHooks.configs['recommended-latest']);
-
 exportdefaultdefineConfig([
 {
 languageOptions: {

fixtures/eslint-v9/index.js

@@ -141,3 +141,27 @@ function useHookInLoops() {
 useHook4();
 }
 }
+
+/**
+ * Compiler Rules
+ */
+// Invalid: component factory
+functionInvalidComponentFactory(){
+constDynamicComponent=()=><div>Hello</div>;
+// eslint-disable-next-line react-hooks/static-components
+return<DynamicComponent/>;
+}
+
+// Invalid: mutating globals
+functionInvalidGlobals(){
+// eslint-disable-next-line react-hooks/immutability
+window.myGlobal=42;
+return<div>Done</div>;
+}
+
+// Invalid: useMemo with wrong deps - triggers preserve-manual-memoization
+functionInvalidUseMemo({items}){
+// eslint-disable-next-line react-hooks/preserve-manual-memoization, react-hooks/exhaustive-deps
+constsorted=useMemo(()=>[...items].sort(),[]);
+return<div>{sorted.length}</div>;
+}