chore: react overrides

package.json

@@ -105,6 +105,14 @@
     "typescript": "^4.7.4",
     "vue": "^3.2.33"
   },
+  "pnpm": {
+    "overrides": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0",
+      "@types/react": "^18.0.14",
+      "@types/react-dom": "^18.0.5"
+    }
+  },
   "bundlewatch": {
     "files": [
       {

packages/react-query-devtools/src/Explorer.tsx

@@ -188,7 +188,7 @@ type Entry = {
 }
 
 type RendererProps = {
-  handleEntry: (entry: Entry) => React.JSX.Element
+  handleEntry: (entry: Entry) => JSX.Element
   label?: string
   value: unknown
   subEntries: Entry[]
@@ -220,7 +220,7 @@ export function chunkArray<T>(array: T[], size: number): T[][] {
   return result
 }
 
-type Renderer = (props: RendererProps) => React.JSX.Element
+type Renderer = (props: RendererProps) => JSX.Element
 
 export const DefaultRenderer: Renderer = ({
   handleEntry,

packages/react-query-persist-client/src/PersistQueryClientProvider.tsx

@@ -20,7 +20,7 @@ export const PersistQueryClientProvider = ({
   persistOptions,
   onSuccess,
   ...props
-}: PersistQueryClientProviderProps): React.JSX.Element => {
+}: PersistQueryClientProviderProps): JSX.Element => {
   const [isRestoring, setIsRestoring] = React.useState(true)
   const refs = React.useRef({ persistOptions, onSuccess })
   const didRestore = React.useRef(false)

packages/react-query/src/QueryClientProvider.tsx

@@ -73,7 +73,7 @@ export const QueryClientProvider = ({
   children,
   context,
   contextSharing = false,
-}: QueryClientProviderProps): React.JSX.Element => {
+}: QueryClientProviderProps): JSX.Element => {
   React.useEffect(() => {
     client.mount()
     return () => {

packages/react-query/src/__tests__/ssr-hydration.test.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
+import ReactDOMTestUtils from 'react-dom/test-utils'
 import ReactDOMServer from 'react-dom/server'
+// eslint-disable-next-line import/no-unresolved -- types only for module augmentation
+import type {} from 'react-dom/next'
 
 import {
   QueryCache,
@@ -11,28 +14,36 @@ import {
 } from '..'
 import { createQueryClient, setIsServer, sleep } from './utils'
 
-const isReact17 = () => (process.env.REACTJS_VERSION || '17') === '17'
-const isReact18 = () => (process.env.REACTJS_VERSION || '18') === '18'
+const isReact19 = () => (process.env.REACTJS_VERSION || '19') === '19'
+const isReact18 = () => (process.env.REACTJS_VERSION || '19') === '18'
 
 const ReactHydrate = (element: React.ReactElement, container: Element) => {
-  if (isReact17()) {
+  if (isReact19()) {
+    let root: any
+    // @ts-expect-error
     React.act(() => {
       // @ts-expect-error
-      ReactDOM.hydrate(element, container)
+      root = ReactDOM.hydrateRoot(container, element)
     })
     return () => {
+      root.unmount()
+    }
+  }
+
+  if (isReact18()) {
+    let root: any
+    ReactDOMTestUtils.act(() => {
       // @ts-expect-error
-      ReactDOM.unmountComponentAtNode(container)
+      root = ReactDOM.hydrateRoot(container, element)
+    })
+    return () => {
+      root.unmount()
     }
   }
 
-  let root: any
-  React.act(() => {
-    // @ts-expect-error
-    root = ReactDOM.hydrateRoot(container, element)
-  })
+  ReactDOM.hydrate(element, container)
   return () => {
-    root.unmount()
+    ReactDOM.unmountComponentAtNode(container)
   }
 }