Await component

The Await component is a component that suspends until the provided promise is resolved or rejected.

The Await component accepts the following props:

• Type: DeferredPromise<T>
• Required
• The deferred promise to await.

• Type: (result: T) => React.ReactNode
• Required
• A function that will be called with the resolved value of the promise.

• Throws an error if the promise is rejected.
• Suspends (throws a promise) if the promise is pending.
• Returns the resolved value of a deferred promise if the promise is resolved using props.children as the render function.

import { Await } from '@tanstack/react-router'

function Component() {
  const { deferredPromise } = route.useLoaderData()

  return (
    <Await promise={deferredPromise}>
      {(data) => <div>{JSON.stringify(data)}</div>}
    </Await>
  )
}

import { Await } from '@tanstack/react-router'

function Component() {
  const { deferredPromise } = route.useLoaderData()

  return (
    <Await promise={deferredPromise}>
      {(data) => <div>{JSON.stringify(data)}</div>}
    </Await>
  )
}