feat(react-query): support React 19

TkDodo · web-flow · commit 41ec5728ee2d · 2024-05-25T20:32:18.000+02:00
* feat: react19 deps * fix: useRef usage * fix: don't use global JSX namespace * fix: overwrite react globally to v19 * fix test assertion * fix hydration tests * console output is weird in 19 * async is hard * react really wants no side-effects during render * fix: use react19 everywhere * Revert "fix: use react19 everywhere" This reverts commit f927611. * just ignore react in sherif as we can have examples with different versions * feat: add the react-compiler linter * chore: move examples to react 19, except nextJs ones
diff --git a/examples/react/algolia/package.json b/examples/react/algolia/package.json
@@ -14,8 +14,8 @@
     "@tanstack/react-query": "^5.38.0",
     "@tanstack/react-query-devtools": "^5.38.0",
     "algoliasearch": "4.23.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.35.6",
diff --git a/examples/react/basic-graphql-request/package.json b/examples/react/basic-graphql-request/package.json
@@ -12,8 +12,8 @@
     "@tanstack/react-query-devtools": "^5.38.0",
     "graphql": "^16.8.1",
     "graphql-request": "^7.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/examples/react/basic-typescript/package.json b/examples/react/basic-typescript/package.json
@@ -14,8 +14,8 @@
     "@tanstack/react-query-devtools": "^5.38.0",
     "@tanstack/react-query-persist-client": "^5.38.0",
     "axios": "^1.6.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.35.6",
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
@@ -11,8 +11,8 @@
     "@tanstack/react-query": "^5.38.0",
     "@tanstack/react-query-devtools": "^5.38.0",
     "axios": "^1.6.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.35.6",
diff --git a/examples/react/default-query-function/package.json b/examples/react/default-query-function/package.json
@@ -11,8 +11,8 @@
     "@tanstack/react-query": "^5.38.0",
     "@tanstack/react-query-devtools": "^5.38.0",
     "axios": "^1.6.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/examples/react/offline/package.json b/examples/react/offline/package.json
@@ -15,8 +15,8 @@
     "@tanstack/react-query-persist-client": "^5.38.0",
     "ky": "^1.2.4",
     "msw": "^2.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "react-hot-toast": "^2.4.1"
   },
   "devDependencies": {
diff --git a/examples/react/playground/package.json b/examples/react/playground/package.json
@@ -10,8 +10,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.38.0",
     "@tanstack/react-query-devtools": "^5.38.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/examples/react/react-native/package.json b/examples/react/react-native/package.json
@@ -19,7 +19,7 @@
     "expo": "^51.0.8",
     "expo-constants": "^16.0.1",
     "expo-status-bar": "^1.12.1",
-    "react": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
     "react-native": "^0.74.1",
     "react-native-gesture-handler": "^2.16.2",
     "react-native-paper": "^5.8.0",
diff --git a/examples/react/react-router/package.json b/examples/react/react-router/package.json
@@ -13,8 +13,8 @@
     "@tanstack/react-query-devtools": "^5.38.0",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "react-router": "^6.23.1",
     "react-router-dom": "^6.23.1",
     "rooks": "^7.14.1",
diff --git a/examples/react/rick-morty/package.json b/examples/react/rick-morty/package.json
@@ -14,8 +14,8 @@
     "@mui/styles": "^5.15.18",
     "@tanstack/react-query": "^5.38.0",
     "@tanstack/react-query-devtools": "^5.38.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "react-router": "^6.23.1",
     "react-router-dom": "^6.23.1"
   },
diff --git a/examples/react/shadow-dom/package.json b/examples/react/shadow-dom/package.json
@@ -12,8 +12,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.38.0",
     "@tanstack/react-query-devtools": "^5.38.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
     "@types/react": "^18.2.79",
diff --git a/examples/react/simple/package.json b/examples/react/simple/package.json
@@ -11,8 +11,8 @@
     "@tanstack/react-query": "^5.38.0",
     "@tanstack/react-query-devtools": "^5.38.0",
     "axios": "^1.6.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/examples/react/star-wars/package.json b/examples/react/star-wars/package.json
@@ -14,8 +14,8 @@
     "@mui/styles": "^5.15.18",
     "@tanstack/react-query": "^5.38.0",
     "@tanstack/react-query-devtools": "^5.38.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "react-router": "^6.23.1",
     "react-router-dom": "^6.23.1"
   },
diff --git a/examples/react/suspense/package.json b/examples/react/suspense/package.json
@@ -7,8 +7,8 @@
     "@tanstack/react-query-devtools": "^5.38.0",
     "axios": "^1.6.8",
     "font-awesome": "^4.7.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "react-error-boundary": "^4.0.13"
   },
   "devDependencies": {
diff --git a/integrations/react-cra4/package.json b/integrations/react-cra4/package.json
@@ -7,8 +7,8 @@
   "dependencies": {
     "@tanstack/react-query": "workspace:*",
     "@tanstack/react-query-devtools": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "react-scripts": "^4.0.3"
   },
   "devDependencies": {
diff --git a/integrations/react-cra5/package.json b/integrations/react-cra5/package.json
@@ -7,8 +7,8 @@
   "dependencies": {
     "@tanstack/react-query": "workspace:*",
     "@tanstack/react-query-devtools": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "react-scripts": "^5.0.1"
   },
   "devDependencies": {
diff --git a/integrations/react-vite/package.json b/integrations/react-vite/package.json
@@ -9,8 +9,8 @@
     "@tanstack/react-query": "workspace:*",
     "@tanstack/react-query-devtools": "workspace:*",
     "@vitejs/plugin-react": "^4.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "vite": "^5.2.11"
   }
 }
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "test:ci": "nx run-many --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw",
     "test:eslint": "nx affected --target=test:eslint --exclude=examples/**",
     "test:format": "pnpm run prettier --check",
-    "test:sherif": "sherif -i react-scripts",
+    "test:sherif": "sherif -i react-scripts -i react -i react-dom",
     "test:lib": "nx affected --target=test:lib --exclude=examples/**",
     "test:lib:dev": "pnpm run test:lib && nx watch --all -- pnpm run test:lib",
     "test:build": "nx affected --target=test:build --exclude=examples/**",
@@ -50,8 +50,8 @@
     "@testing-library/react": "^15.0.7",
     "@types/eslint": "^8.56.10",
     "@types/node": "^20.12.12",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "@vitest/coverage-istanbul": "^1.6.0",
@@ -71,8 +71,8 @@
     "prettier": "^4.0.0-alpha.8",
     "prettier-plugin-svelte": "^3.2.3",
     "publint": "^0.2.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "rimraf": "^5.0.7",
     "sherif": "^0.8.4",
     "solid-js": "^1.8.17",
@@ -85,7 +85,9 @@
     "overrides": {
       "@typescript-eslint/eslint-plugin": "$@typescript-eslint/eslint-plugin",
       "@typescript-eslint/parser": "$@typescript-eslint/parser",
-      "eslint": "$eslint"
+      "eslint": "$eslint",
+      "@types/react": "npm:types-react@rc",
+      "@types/react-dom": "npm:types-react-dom@rc"
     }
   }
 }
diff --git a/packages/react-query-devtools/package.json b/packages/react-query-devtools/package.json
@@ -72,12 +72,12 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "workspace:*",
-    "@types/react": "^18.2.79",
+    "@types/react": "npm:types-react@rc",
     "@vitejs/plugin-react": "^4.2.1",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "peerDependencies": {
     "@tanstack/react-query": "workspace:^",
-    "react": "^18.0.0"
+    "react": "^18 || ^19"
   }
 }
diff --git a/packages/react-query-next-experimental/package.json b/packages/react-query-next-experimental/package.json
@@ -42,14 +42,14 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "workspace:*",
-    "@types/react": "^18.2.79",
+    "@types/react": "npm:types-react@rc",
     "@vitejs/plugin-react": "^4.2.1",
     "next": "^14.0.0",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "peerDependencies": {
     "@tanstack/react-query": "workspace:^",
-    "next": "^13 || ^14",
-    "react": "^18.0.0"
+    "next": "^13 || ^14 || ^15",
+    "react": "^18 || ^19"
   }
 }
diff --git a/packages/react-query-persist-client/package.json b/packages/react-query-persist-client/package.json
@@ -51,12 +51,12 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "workspace:*",
-    "@types/react": "^18.2.79",
+    "@types/react": "npm:types-react@rc",
     "@vitejs/plugin-react": "^4.2.1",
-    "react": "^18.2.0"
+    "react": "19.0.0-rc-4c2e457c7c-20240522"
   },
   "peerDependencies": {
     "@tanstack/react-query": "workspace:^",
-    "react": "^18.0.0"
+    "react": "^18 || ^19"
   }
 }
diff --git a/packages/react-query-persist-client/src/PersistQueryClientProvider.tsx b/packages/react-query-persist-client/src/PersistQueryClientProvider.tsx
@@ -20,7 +20,7 @@ export const PersistQueryClientProvider = ({
   persistOptions,
   onSuccess,
   ...props
-}: PersistQueryClientProviderProps): JSX.Element => {
+}: PersistQueryClientProviderProps): React.JSX.Element => {
   const [isRestoring, setIsRestoring] = React.useState(true)
   const refs = React.useRef({ persistOptions, onSuccess })
   const didRestore = React.useRef(false)
diff --git a/packages/react-query/.eslintrc.cjs b/packages/react-query/.eslintrc.cjs
@@ -3,10 +3,20 @@
 /** @type {import('eslint').Linter.Config} */
 const config = {
   extends: ['plugin:react/jsx-runtime', 'plugin:react-hooks/recommended'],
+  plugins: ['react-compiler'],
   rules: {
+    'react-compiler/react-compiler': 'error',
     'react/jsx-key': ['error', { checkFragmentShorthand: true }],
     'react-hooks/exhaustive-deps': 'error',
   },
+  overrides: [
+    {
+      files: ['**/__tests__/**'],
+      rules: {
+        'react-compiler/react-compiler': 'off',
+      },
+    },
+  ],
 }
 
 module.exports = config
diff --git a/packages/react-query/package.json b/packages/react-query/package.json
@@ -56,11 +56,12 @@
     "@tanstack/query-core": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "@vitejs/plugin-react": "^4.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "eslint-plugin-react-compiler": "^0.0.0-experimental-c8b3f72-20240517",
+    "react": "19.0.0-rc-4c2e457c7c-20240522",
+    "react-dom": "19.0.0-rc-4c2e457c7c-20240522",
     "react-error-boundary": "^4.0.13"
   },
   "peerDependencies": {
diff --git a/packages/react-query/src/__tests__/ssr-hydration.test.tsx b/packages/react-query/src/__tests__/ssr-hydration.test.tsx
@@ -1,6 +1,6 @@
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
-import ReactDOM from 'react-dom'
-import * as ReactDOMTestUtils from 'react-dom/test-utils'
+import { hydrateRoot } from 'react-dom/client'
+import { act } from 'react'
 import * as ReactDOMServer from 'react-dom/server'
 
 import {
@@ -14,9 +14,8 @@ import { createQueryClient, setIsServer, sleep } from './utils'
 
 const ReactHydrate = (element: React.ReactElement, container: Element) => {
   let root: any
-  ReactDOMTestUtils.act(() => {
-    // @ts-expect-error
-    root = ReactDOM.hydrateRoot(container, element)
+  act(() => {
+    root = hydrateRoot(container, element)
   })
   return () => {
     root.unmount()
@@ -111,11 +110,8 @@ describe('Server side rendering with de/rehydration', () => {
     )
 
     // Check that we have no React hydration mismatches
-    // this should be zero calls and can be changed once we drop react17 support
-    expect(consoleMock).toHaveBeenNthCalledWith(
-      1,
-      'Warning: You are importing hydrateRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".',
-    )
+    expect(consoleMock).toHaveBeenCalledTimes(0)
+
     expect(fetchDataSuccess).toHaveBeenCalledTimes(2)
     expect(el.innerHTML).toBe(expectedMarkup)
 
@@ -189,8 +185,7 @@ describe('Server side rendering with de/rehydration', () => {
       el,
     )
 
-    // We expect exactly one console.error here, which is from the
-    expect(consoleMock).toHaveBeenCalledTimes(1)
+    expect(consoleMock).toHaveBeenCalledTimes(0)
     expect(fetchDataError).toHaveBeenCalledTimes(2)
     expect(el.innerHTML).toBe(expectedMarkup)
     await sleep(50)
@@ -261,11 +256,7 @@ describe('Server side rendering with de/rehydration', () => {
     )
 
     // Check that we have no React hydration mismatches
-    // this should be zero calls and can be changed once we drop react17 support
-    expect(consoleMock).toHaveBeenNthCalledWith(
-      1,
-      'Warning: You are importing hydrateRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".',
-    )
+    expect(consoleMock).toHaveBeenCalledTimes(0)
     expect(fetchDataSuccess).toHaveBeenCalledTimes(1)
     expect(el.innerHTML).toBe(expectedMarkup)
     await sleep(50)
diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx
diff --git a/packages/react-query/src/__tests__/useMutation.test.tsx b/packages/react-query/src/__tests__/useMutation.test.tsx
diff --git a/packages/react-query/src/useMutationState.ts b/packages/react-query/src/useMutationState.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
