fix: use React.use if available (#6229)

Author: schiller-manuel

packages/react-router/src/awaited.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react'
 
 import { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'
-import type { DeferredPromise } from '@tanstack/router-core'
 
 export type AwaitOptions<T> = {
   promise: Promise<T>
 }
 
 /** Suspend until a deferred promise resolves or rejects and return its data. */
-export function useAwaited<T>({
-  promise: _promise,
-}: AwaitOptions<T>): [T, DeferredPromise<T>] {
+export function useAwaited<T>({ promise: _promise }: AwaitOptions<T>): T {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (React.use) {
+    const data = React.use(_promise)
+    return data
+  }
   const promise = defer(_promise)
 
   if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {
@@ -21,7 +23,7 @@ export function useAwaited<T>({
     throw promise[TSR_DEFERRED_PROMISE].error
   }
 
-  return [promise[TSR_DEFERRED_PROMISE].data, promise]
+  return promise[TSR_DEFERRED_PROMISE].data
 }
 
 /**
@@ -47,7 +49,7 @@ function AwaitInner<T>(
     children: (result: T) => React.ReactNode
   },
 ): React.JSX.Element {
-  const [data] = useAwaited(props)
+  const data = useAwaited(props)
 
   return props.children(data) as React.JSX.Element
 }

packages/react-router/src/lazyRouteComponent.tsx

@@ -79,7 +79,12 @@ export function lazyRouteComponent<
     }
 
     if (!comp) {
-      throw load()
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (React.use) {
+        React.use(load())
+      } else {
+        throw load()
+      }
     }
 
     return React.createElement(comp, props)