refactor: use react-state for one-time initialization over instance refs (TanStack#2253)

Author: TkDodo

docs/src/pages/guides/ssr.md

@@ -49,7 +49,7 @@ React Query supports prefetching multiple queries on the server in Next.js and t
 
 To support caching queries on the server and set up hydration:
 
-- Create a new `QueryClient` instance **inside of your app, and on an instance ref. This ensures that data is not shared between different users and requests.**
+- Create a new `QueryClient` instance **inside of your app, and on an instance ref (or in React state). This ensures that data is not shared between different users and requests, while still only creating the QueryClient once per component lifecycle.**
 - Wrap your app component with `<QueryClientProvider>` and pass it the client instance
 - Wrap your app component with `<Hydrate>` and pass it the `dehydratedState` prop from `pageProps`
 
@@ -59,13 +59,10 @@ import { QueryClient, QueryClientProvider } from 'react-query'
 import { Hydrate } from 'react-query/hydration'
 
 export default function MyApp({ Component, pageProps }) {
-  const queryClientRef = React.useRef()
-  if (!queryClientRef.current) {
-    queryClientRef.current = new QueryClient()
-  }
+  const [queryClient] = React.useState(() => new QueryClient())
 
   return (
-    <QueryClientProvider client={queryClientRef.current}>
+    <QueryClientProvider client={queryClient}>
       <Hydrate state={pageProps.dehydratedState}>
         <Component {...pageProps} />
       </Hydrate>

examples/nextjs/pages/_app.js

@@ -4,13 +4,10 @@ import { Hydrate } from 'react-query/hydration'
 import { ReactQueryDevtools } from 'react-query/devtools'
 
 export default function MyApp({ Component, pageProps }) {
-  const queryClientRef = React.useRef()
-  if (!queryClientRef.current) {
-    queryClientRef.current = new QueryClient()
-  }
+  const [queryClient] = React.useState(() => new QueryClient())
 
   return (
-    <QueryClientProvider client={queryClientRef.current}>
+    <QueryClientProvider client={queryClient}>
       <Hydrate state={pageProps.dehydratedState}>
         <Component {...pageProps} />
       </Hydrate>

src/react/useBaseQuery.ts

@@ -67,28 +67,22 @@ export function useBaseQuery<
     }
   }
 
-  const obsRef = React.useRef<
-    QueryObserver<TQueryFnData, TError, TData, TQueryData, TQueryKey>
-  >()
-
-  if (!obsRef.current) {
-    obsRef.current = new Observer<
-      TQueryFnData,
-      TError,
-      TData,
-      TQueryData,
-      TQueryKey
-    >(queryClient, defaultedOptions)
-  }
+  const [observer] = React.useState(
+    () =>
+      new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(
+        queryClient,
+        defaultedOptions
+      )
+  )
 
-  let result = obsRef.current.getOptimisticResult(defaultedOptions)
+  let result = observer.getOptimisticResult(defaultedOptions)
 
   React.useEffect(() => {
     mountedRef.current = true
 
     errorResetBoundary.clearReset()
 
-    const unsubscribe = obsRef.current!.subscribe(
+    const unsubscribe = observer.subscribe(
       notifyManager.batchCalls(() => {
         if (mountedRef.current) {
           forceUpdate(x => x + 1)
@@ -98,23 +92,23 @@ export function useBaseQuery<
 
     // Update result to make sure we did not miss any query updates
     // between creating the observer and subscribing to it.
-    obsRef.current!.updateResult()
+    observer.updateResult()
 
     return () => {
       mountedRef.current = false
       unsubscribe()
     }
-  }, [errorResetBoundary])
+  }, [errorResetBoundary, observer])
 
   React.useEffect(() => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.
-    obsRef.current!.setOptions(defaultedOptions, { listeners: false })
-  }, [defaultedOptions])
+    observer.setOptions(defaultedOptions, { listeners: false })
+  }, [defaultedOptions, observer])
 
   // Handle suspense
   if (defaultedOptions.suspense && result.isLoading) {
-    throw obsRef.current
+    throw observer
       .fetchOptimistic(defaultedOptions)
       .then(({ data }) => {
         defaultedOptions.onSuccess?.(data as TData)
@@ -138,7 +132,7 @@ export function useBaseQuery<
 
   // Handle result property usage tracking
   if (defaultedOptions.notifyOnChangeProps === 'tracked') {
-    result = obsRef.current.trackResult(result)
+    result = observer.trackResult(result)
   }
 
   return result

src/react/useQueries.ts

@@ -20,18 +20,16 @@ export function useQueries(queries: UseQueryOptions[]): UseQueryResult[] {
     return defaultedOptions
   })
 
-  const obsRef = React.useRef<QueriesObserver>()
+  const [observer] = React.useState(
+    () => new QueriesObserver(queryClient, defaultedQueries)
+  )
 
-  if (!obsRef.current) {
-    obsRef.current = new QueriesObserver(queryClient, defaultedQueries)
-  }
-
-  const result = obsRef.current.getOptimisticResult(defaultedQueries)
+  const result = observer.getOptimisticResult(defaultedQueries)
 
   React.useEffect(() => {
     mountedRef.current = true
 
-    const unsubscribe = obsRef.current!.subscribe(
+    const unsubscribe = observer.subscribe(
       notifyManager.batchCalls(() => {
         if (mountedRef.current) {
           forceUpdate(x => x + 1)
@@ -43,13 +41,13 @@ export function useQueries(queries: UseQueryOptions[]): UseQueryResult[] {
       mountedRef.current = false
       unsubscribe()
     }
-  }, [])
+  }, [observer])
 
   React.useEffect(() => {
     // Do not notify on updates because of changes in the options because
     // these changes should already be reflected in the optimistic result.
-    obsRef.current!.setQueries(defaultedQueries, { listeners: false })
-  }, [defaultedQueries])
+    observer.setQueries(defaultedQueries, { listeners: false })
+  }, [defaultedQueries, observer])
 
   return result
 }