chore: update eslint-plugin-react-hooks (#9737)

TkDodo · web-flow · commit f4a0cd596b97 · 2025-10-08T15:09:08.000+02:00
* chore: update eslint-plugin-react-hooks

* chore: override warning rules to error

* chore: config everywhere

* chore: lint violations
diff --git a/examples/react/algolia/eslint.config.js b/examples/react/algolia/eslint.config.js
@@ -1,17 +1,9 @@
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import pluginReact from '@eslint-react/eslint-plugin'
-import * as reactHooks from 'eslint-plugin-react-hooks'
 
 export default [
   ...tanstackConfig,
   ...pluginQuery.configs['flat/recommended'],
   pluginReact.configs.recommended,
-  reactHooks.configs.recommended,
-  {
-    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,17 +1,9 @@
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import pluginReact from '@eslint-react/eslint-plugin'
-import * as reactHooks from 'eslint-plugin-react-hooks'
 
 export default [
   ...tanstackConfig,
   ...pluginQuery.configs['flat/recommended'],
   pluginReact.configs.recommended,
-  reactHooks.configs.recommended,
-  {
-    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,17 +1,9 @@
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import pluginReact from '@eslint-react/eslint-plugin'
-import * as reactHooks from 'eslint-plugin-react-hooks'
 
 export default [
   ...tanstackConfig,
   ...pluginQuery.configs['flat/recommended'],
   pluginReact.configs.recommended,
-  reactHooks.configs.recommended,
-  {
-    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,17 +1,9 @@
 import { tanstackConfig } from '@tanstack/config/eslint'
 import pluginQuery from '@tanstack/eslint-plugin-query'
 import pluginReact from '@eslint-react/eslint-plugin'
-import * as reactHooks from 'eslint-plugin-react-hooks'
 
 export default [
   ...tanstackConfig,
   ...pluginQuery.configs['flat/recommended'],
   pluginReact.configs.recommended,
-  reactHooks.configs.recommended,
-  {
-    rules: {
-      'react-hooks/exhaustive-deps': 'error',
-      'react-hooks/rules-of-hooks': 'error',
-    },
-  },
 ]
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "@vitest/eslint-plugin": "^1.1.36",
     "esbuild-plugin-file-path-extensions": "^2.1.4",
     "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^6.0.0-rc.2",
+    "eslint-plugin-react-hooks": "^6.1.1",
     "jsdom": "^27.0.0",
     "knip": "^5.63.1",
     "markdown-link-extractor": "^4.0.2",
diff --git a/packages/react-query-devtools/eslint.config.js b/packages/react-query-devtools/eslint.config.js
@@ -1,24 +1,22 @@
 // @ts-check
 
 import pluginReact from '@eslint-react/eslint-plugin'
-import * as reactHooks from 'eslint-plugin-react-hooks'
+import reactHooks from 'eslint-plugin-react-hooks'
 import rootConfig from './root.eslint.config.js'
 
 export default [
   ...rootConfig,
-  reactHooks.configs.recommended,
+  // @ts-expect-error wtf
+  ...reactHooks.configs['recommended-latest'],
   {
     files: ['**/*.{ts,tsx}'],
     ...pluginReact.configs.recommended,
     rules: {
       '@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
-    },
-  },
-  {
-    rules: {
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/react-compiler': 'error',
+      'react-hooks/unsupported-syntax': 'error',
+      'react-hooks/incompatible-library': 'error',
     },
   },
 ]
diff --git a/packages/react-query-next-experimental/eslint.config.js b/packages/react-query-next-experimental/eslint.config.js
@@ -1,25 +1,22 @@
 // @ts-check
 
 import pluginReact from '@eslint-react/eslint-plugin'
-import * as reactHooks from 'eslint-plugin-react-hooks'
+import reactHooks from 'eslint-plugin-react-hooks'
 import rootConfig from './root.eslint.config.js'
 
 export default [
   ...rootConfig,
-  reactHooks.configs.recommended,
+  // @ts-expect-error wtf
+  ...reactHooks.configs['recommended-latest'],
   {
     files: ['**/*.{ts,tsx}'],
     ...pluginReact.configs.recommended,
     rules: {
       '@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
-    },
-  },
-  {
-    rules: {
-      '@eslint-react/no-unstable-context-value': 'off',
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/react-compiler': 'error',
+      'react-hooks/unsupported-syntax': 'error',
+      'react-hooks/incompatible-library': 'error',
     },
   },
 ]
diff --git a/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx b/packages/react-query-next-experimental/src/HydrationStreamProvider.tsx
@@ -130,7 +130,7 @@ export function createHydrationStreamProvider<TShape>() {
         .join(',')
 
       // Flush stream
-      // eslint-disable-next-line react-hooks/react-compiler
+      // eslint-disable-next-line react-hooks/immutability
       stream.length = 0
 
       const html: Array<string> = [
@@ -169,6 +169,7 @@ export function createHydrationStreamProvider<TShape>() {
 
         onEntries(...winStream)
 
+        // eslint-disable-next-line react-hooks/immutability
         win[id] = {
           initialized: true,
           push: onEntries,
diff --git a/packages/react-query-persist-client/eslint.config.js b/packages/react-query-persist-client/eslint.config.js
@@ -1,24 +1,22 @@
 // @ts-check
 
 import pluginReact from '@eslint-react/eslint-plugin'
-import * as reactHooks from 'eslint-plugin-react-hooks'
+import reactHooks from 'eslint-plugin-react-hooks'
 import rootConfig from './root.eslint.config.js'
 
 export default [
   ...rootConfig,
-  reactHooks.configs.recommended,
+  // @ts-expect-error wtf
+  ...reactHooks.configs['recommended-latest'],
   {
     files: ['**/*.{ts,tsx}'],
     ...pluginReact.configs.recommended,
     rules: {
       '@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
-    },
-  },
-  {
-    rules: {
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/react-compiler': 'error',
+      'react-hooks/unsupported-syntax': 'error',
+      'react-hooks/incompatible-library': '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,7 +371,6 @@ 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,32 +1,29 @@
 // @ts-check
 
 import pluginReact from '@eslint-react/eslint-plugin'
-import * as reactHooks from 'eslint-plugin-react-hooks'
+import reactHooks from 'eslint-plugin-react-hooks'
 import rootConfig from './root.eslint.config.js'
 
 export default [
   ...rootConfig,
-  reactHooks.configs.recommended,
+  // @ts-expect-error wtf
+  ...reactHooks.configs['recommended-latest'],
   {
     files: ['**/*.{ts,tsx}'],
     ...pluginReact.configs.recommended,
     rules: {
       '@eslint-react/no-context-provider': 'off', // We need to be React 18 compatible
-    },
-  },
-  {
-    rules: {
-      '@eslint-react/dom/no-missing-button-type': 'off',
-      'react-hooks/react-compiler': 'error',
       'react-hooks/exhaustive-deps': 'error',
       'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/unsupported-syntax': 'error',
+      'react-hooks/incompatible-library': 'error',
     },
   },
   {
     files: ['**/__tests__/**'],
     rules: {
+      '@eslint-react/dom/no-missing-button-type': 'off',
       '@typescript-eslint/no-unnecessary-condition': 'off',
-      'react-hooks/react-compiler': 'off',
     },
   },
 ]
diff --git a/packages/react-query/src/HydrationBoundary.tsx b/packages/react-query/src/HydrationBoundary.tsx
@@ -31,7 +31,9 @@ export const HydrationBoundary = ({
   const client = useQueryClient(queryClient)
 
   const optionsRef = React.useRef(options)
-  optionsRef.current = options
+  React.useEffect(() => {
+    optionsRef.current = options
+  })
 
   // This useMemo is for performance reasons only, everything inside it must
   // be safe to run in every render and code here should be read as "in render".
@@ -89,6 +91,7 @@ export const HydrationBoundary = ({
         if (newQueries.length > 0) {
           // It's actually fine to call this with queries/state that already exists
           // in the cache, or is older. hydrate() is idempotent for queries.
+          // eslint-disable-next-line react-hooks/refs
           hydrate(client, { queries: newQueries }, optionsRef.current)
         }
         if (existingQueries.length > 0) {
diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx
@@ -4684,6 +4684,7 @@ describe('useQuery', () => {
 
     function Page(props: { limit: number }) {
       const state = useQuery({ queryKey: [key, props.limit], queryFn })
+      // eslint-disable-next-line react-hooks/immutability
       states[props.limit] = state
       return (
         <div>
@@ -6152,7 +6153,6 @@ describe('useQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const mounted = React.useRef<boolean>(false)
       const { data, status } = useQuery({
         enabled: false,
         queryKey: key,
@@ -6162,9 +6162,10 @@ describe('useQuery', () => {
         },
       })
 
+      const mounted = React.useRef<boolean>(null)
       // this simulates a synchronous update between the time the query is created
       // and the time it is subscribed to that could be missed otherwise
-      if (!mounted.current) {
+      if (mounted.current === null) {
         mounted.current = true
         queryClient.setQueryData(key, 1)
       }
diff --git a/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test.tsx b/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test.tsx
@@ -25,6 +25,7 @@ describe('useSuspenseInfiniteQuery', () => {
         initialPageParam: 1,
         getNextPageParam: () => 1,
         // @ts-expect-error
+        // eslint-disable-next-line react-hooks/purity
         queryFn: Math.random() >= 0 ? skipToken : () => Promise.resolve(5),
       })
 
diff --git a/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx b/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx
@@ -236,7 +236,7 @@ describe('UseSuspenseQueries config object overload', () => {
     )
   })
 
-  it('should not show type error when using spreaded queryOptions', () => {
+  it('should not show type error when using rest queryOptions', () => {
     assertType(
       useSuspenseQueries({
         queries: [
diff --git a/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx b/packages/react-query/src/__tests__/useSuspenseQueries.test.tsx
@@ -258,6 +258,7 @@ describe('useSuspenseQueries 2', () => {
     }
 
     function Page() {
+      // eslint-disable-next-line react-hooks/purity
       const ref = React.useRef(Math.random())
       const result = useSuspenseQueries({
         queries: [
@@ -665,6 +666,7 @@ describe('useSuspenseQueries 2', () => {
           {
             queryKey: key,
             // @ts-expect-error
+            // eslint-disable-next-line react-hooks/purity
             queryFn: Math.random() >= 0 ? skipToken : () => Promise.resolve(5),
           },
         ],
diff --git a/packages/react-query/src/__tests__/useSuspenseQuery.test.tsx b/packages/react-query/src/__tests__/useSuspenseQuery.test.tsx
@@ -875,6 +875,7 @@ describe('useSuspenseQuery', () => {
       useSuspenseQuery({
         queryKey: key,
         // @ts-expect-error
+        // eslint-disable-next-line react-hooks/purity
         queryFn: Math.random() >= 0 ? skipToken : () => Promise.resolve(5),
       })
 
diff --git a/packages/react-query/src/useMutationState.ts b/packages/react-query/src/useMutationState.ts
@@ -46,7 +46,7 @@ export function useMutationState<TResult = MutationState>(
   const mutationCache = useQueryClient(queryClient).getMutationCache()
   const optionsRef = React.useRef(options)
   const result = React.useRef<Array<TResult>>(null)
-  if (!result.current) {
+  if (result.current === null) {
     result.current = getResult(mutationCache, options)
   }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
