chore: update to eslint-plugin-react-hooks v6 (#9071)

TkDodo · web-flow · commit 34eedd601c7b · 2025-05-29T11:09:26.000+02:00
* chore: update to eslint-plugin-react-hooks v6

and remove the separate compiler linter plugin, as those rules are now integrated

* chore: disable compiler-linter in tests

* chore: bypass lint violations

* chore: Disable '@eslint-react/no-context-provider'

to be react 18 compatible
diff --git a/.github/renovate.json b/.github/renovate.json
@@ -20,7 +20,6 @@
     "@types/node",
     "@types/react",
     "@types/react-dom",
-    "eslint-plugin-react-compiler",
     "node",
     "react",
     "react-dom",
diff --git a/examples/react/algolia/eslint.config.js b/examples/react/algolia/eslint.config.js
@@ -1,16 +1,14 @@
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import pluginReact from '@eslint-react/eslint-plugin'
-import pluginReactHooks from 'eslint-plugin-react-hooks'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 
 export default [
   ...tanstackConfig,
   ...pluginQuery.configs['flat/recommended'],
   pluginReact.configs.recommended,
+  reactHooks.configs.recommended,
   {
-    plugins: {
-      'react-hooks': pluginReactHooks,
-    },
     rules: {
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
diff --git a/examples/react/basic-graphql-request/eslint.config.js b/examples/react/basic-graphql-request/eslint.config.js
@@ -1,16 +1,14 @@
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import pluginReact from '@eslint-react/eslint-plugin'
-import pluginReactHooks from 'eslint-plugin-react-hooks'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 
 export default [
   ...tanstackConfig,
   ...pluginQuery.configs['flat/recommended'],
   pluginReact.configs.recommended,
+  reactHooks.configs.recommended,
   {
-    plugins: {
-      'react-hooks': pluginReactHooks,
-    },
     rules: {
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
diff --git a/examples/react/basic/eslint.config.js b/examples/react/basic/eslint.config.js
@@ -1,16 +1,14 @@
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import pluginReact from '@eslint-react/eslint-plugin'
-import pluginReactHooks from 'eslint-plugin-react-hooks'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 
 export default [
   ...tanstackConfig,
   ...pluginQuery.configs['flat/recommended'],
   pluginReact.configs.recommended,
+  reactHooks.configs.recommended,
   {
-    plugins: {
-      'react-hooks': pluginReactHooks,
-    },
     rules: {
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
diff --git a/examples/react/shadow-dom/eslint.config.js b/examples/react/shadow-dom/eslint.config.js
@@ -1,16 +1,14 @@
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import pluginReact from '@eslint-react/eslint-plugin'
-import pluginReactHooks from 'eslint-plugin-react-hooks'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 
 export default [
   ...tanstackConfig,
   ...pluginQuery.configs['flat/recommended'],
   pluginReact.configs.recommended,
+  reactHooks.configs.recommended,
   {
-    plugins: {
-      'react-hooks': pluginReactHooks,
-    },
     rules: {
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "cpy-cli": "^5.0.0",
     "esbuild-plugin-file-path-extensions": "^2.1.4",
     "eslint": "^9.15.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^6.0.0-rc.1",
     "fast-glob": "^3.3.3",
     "jsdom": "^25.0.1",
     "knip": "^5.50.2",
diff --git a/packages/react-query-devtools/eslint.config.js b/packages/react-query-devtools/eslint.config.js
@@ -1,22 +1,24 @@
 // @ts-check
 
 import pluginReact from '@eslint-react/eslint-plugin'
-import pluginReactHooks from 'eslint-plugin-react-hooks'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 import rootConfig from './root.eslint.config.js'
 
 export default [
   ...rootConfig,
+  reactHooks.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
     ...pluginReact.configs.recommended,
+    rules: {
+      '@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
+    },
   },
   {
-    plugins: {
-      'react-hooks': pluginReactHooks,
-    },
     rules: {
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/react-compiler': 'error',
     },
   },
 ]
diff --git a/packages/react-query-next-experimental/eslint.config.js b/packages/react-query-next-experimental/eslint.config.js
@@ -1,23 +1,25 @@
 // @ts-check
 
 import pluginReact from '@eslint-react/eslint-plugin'
-import pluginReactHooks from 'eslint-plugin-react-hooks'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 import rootConfig from './root.eslint.config.js'
 
 export default [
   ...rootConfig,
+  reactHooks.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
     ...pluginReact.configs.recommended,
+    rules: {
+      '@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
+    },
   },
   {
-    plugins: {
-      'react-hooks': pluginReactHooks,
-    },
     rules: {
       '@eslint-react/no-unstable-context-value': 'off',
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/react-compiler': 'error',
     },
   },
 ]
diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -130,6 +130,7 @@ export function createHydrationStreamProvider<TShape>() {
         .join(',')
 
       // Flush stream
+      // eslint-disable-next-line react-hooks/react-compiler
       stream.length = 0
 
       const html: Array<string> = [
diff --git a/packages/react-query-persist-client/eslint.config.js b/packages/react-query-persist-client/eslint.config.js
@@ -1,22 +1,24 @@
 // @ts-check
 
 import pluginReact from '@eslint-react/eslint-plugin'
-import pluginReactHooks from 'eslint-plugin-react-hooks'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 import rootConfig from './root.eslint.config.js'
 
 export default [
   ...rootConfig,
+  reactHooks.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
     ...pluginReact.configs.recommended,
+    rules: {
+      '@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
+    },
   },
   {
-    plugins: {
-      'react-hooks': pluginReactHooks,
-    },
     rules: {
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/react-compiler': 'error',
     },
   },
 ]
diff --git a/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx b/packages/react-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx
@@ -371,6 +371,7 @@ describe('PersistQueryClientProvider', () => {
       const state = useQuery({
         queryKey: key,
         queryFn: async () => {
+          // eslint-disable-next-line react-hooks/react-compiler
           fetched = true
           await sleep(10)
           return 'fetched'
diff --git a/packages/react-query/eslint.config.js b/packages/react-query/eslint.config.js
@@ -1,28 +1,23 @@
 // @ts-check
 
 import pluginReact from '@eslint-react/eslint-plugin'
-// @ts-expect-error
-import pluginReactCompiler from 'eslint-plugin-react-compiler'
-import pluginReactHooks from 'eslint-plugin-react-hooks'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 import rootConfig from './root.eslint.config.js'
 
 export default [
   ...rootConfig,
+  reactHooks.configs.recommended,
   {
     files: ['**/*.{ts,tsx}'],
     ...pluginReact.configs.recommended,
     rules: {
-      '@eslint-react/no-context-provider': 'off',
+      '@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
     },
   },
   {
-    plugins: {
-      'react-hooks': pluginReactHooks,
-      'react-compiler': pluginReactCompiler,
-    },
     rules: {
       '@eslint-react/dom/no-missing-button-type': 'off',
-      'react-compiler/react-compiler': 'error',
+      'react-hooks/react-compiler': 'error',
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
     },
@@ -31,7 +26,7 @@ export default [
     files: ['**/__tests__/**'],
     rules: {
       '@typescript-eslint/no-unnecessary-condition': 'off',
-      'react-compiler/react-compiler': 'off',
+      'react-hooks/react-compiler': 'off',
     },
   },
 ]
diff --git a/packages/react-query/package.json b/packages/react-query/package.json
@@ -75,7 +75,6 @@
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "npm-run-all2": "^5.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
diff --git a/packages/react-query/src/HydrationBoundary.tsx b/packages/react-query/src/HydrationBoundary.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable react-compiler/react-compiler */
-
 'use client'
 import * as React from 'react'
 
@@ -101,6 +99,7 @@ export const HydrationBoundary = ({
         hydrate(client, { queries: newQueries }, optionsRef.current)
       }
       if (existingQueries.length > 0) {
+        // eslint-disable-next-line react-hooks/react-compiler
         setHydrationQueue((prev) =>
           prev ? [...prev, ...existingQueries] : existingQueries,
         )
diff --git a/packages/react-query/src/useMutationState.ts b/packages/react-query/src/useMutationState.ts
@@ -1,5 +1,3 @@
-/* eslint-disable react-compiler/react-compiler */
-
 'use client'
 import * as React from 'react'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-/* eslint-disable react-compiler/react-compiler */`
`2`		`-`
`3`	`1`	`'use client'`
`4`	`2`	`import * as React from 'react'`
`5`	`3`
`@@ -101,6 +99,7 @@ export const HydrationBoundary = ({`
`101`	`99`	`hydrate(client, { queries: newQueries }, optionsRef.current)`
`102`	`100`	`}`
`103`	`101`	`if (existingQueries.length > 0) {`
	`102`	`+ // eslint-disable-next-line react-hooks/react-compiler`
`104`	`103`	`setHydrationQueue((prev) =>`
`105`	`104`	`prev ? [...prev, ...existingQueries] : existingQueries,`
`106`	`105`	`)`