AwaitProps interface

Properties

children

Type: ReactNode | AwaitResolveRenderFunction

When using a function, the resolved value is provided as the parameter.

<Await resolve={reviewsPromise}>
  {(resolvedReviews) => <Reviews items={resolvedReviews} />}
</Await>

When using React elements, useAsyncValue will provide the resolved value:

<Await resolve={reviewsPromise}>
  <Reviews />
</Await>

function Reviews() {
  const resolvedReviews = useAsyncValue()
  return <div>...</div>
}

errorElement

Type: ReactNode

The error element renders instead of the children when the promise rejects.

<Await
  errorElement={<div>Oops</div>}
  resolve={reviewsPromise}
>
  <Reviews />
</Await>

To provide a more contextual error, you can use the useAsyncError in a child component

<Await
  errorElement={<ReviewsError />}
  resolve={reviewsPromise}
>
  <Reviews />
</Await>

function ReviewsError() {
  const error = useAsyncError()
  return <div>Error loading reviews: {error.message}</div>
}

If you do not provide an errorElement, the rejected value will bubble up to the nearest route-level ErrorBoundary and be accessible via useRouteError hook.

resolve

Type: any

Takes a promise returned from a loader value to be resolved and rendered.

import { useLoaderData, Await } from "react-router"

export async function loader() {
  let reviews = getReviews() // not awaited
  let book = await getBook()
  return {
    book,
    reviews, // this is a promise
  }
}

export default function Book() {
  const {
    book,
    reviews, // this is the same promise
  } = useLoaderData()

  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<ReviewsSkeleton />}>
        <Await
          // and is the promise we pass to Await
          resolve={reviews}
        >
          <Reviews />
        </Await>
      </React.Suspense>
    </div>
  );
}