feat(react-query): support React 19

* 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
TanStack · May 25, 2024 · 41ec572 · 41ec572
1 parent 497dd65
commit 41ec572
Show file tree

Hide file tree

Showing 29 changed files with 18,561 additions and 21,948 deletions.
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)