import { Await, useLoaderData } from "react-router-dom";
function Book() {
  const { book, reviews } = useLoaderData();
  return (
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<ReviewsSkeleton />}>
        <Await
          resolve={reviews}
          errorElement={
            <div>Could not load reviews 😬</div>
          children={(resolvedReviews) => (
            <Reviews items={resolvedReviews} />
      </React.Suspense>
    </div>
Note: <Await> expects to be rendered inside of a <React.Suspense> or <React.SuspenseList> parent to enable the fallback UI.
Type declaration
declare function Await(
  props: AwaitProps
): React.ReactElement;
interface AwaitProps {
  children: React.ReactNode | AwaitResolveRenderFunction;
  errorElement?: React.ReactNode;
  resolve: TrackedPromise | any;
interface AwaitResolveRenderFunction {
  (data: Awaited<any>): React.ReactElement;
children
Can either be React elements or a function.
When using a function, the value is provided as the only parameter.
<Await resolve={reviewsPromise}>
  {(resolvedReviews) => <Reviews items={resolvedReviews} />}
</Await>
When using React elements, useAsyncValue will provide the data:
<Await resolve={reviewsPromise}>
  <Reviews />
</Await>;
function Reviews() {
  const resolvedReviews = useAsyncValue();
  return <div>{/* ... */}</div>;
errorElement
The error element renders instead of the children when the promise rejects. You can access the error with useAsyncError.
If the promise rejects, you can provide an optional errorElement to handle that error in a contextual UI via the useAsyncError hook.
<Await
  resolve={reviewsPromise}
  errorElement={<ReviewsError />}
  <Reviews />
</Await>;
function ReviewsError() {
  const error = useAsyncError();
  return <div>{error.message}</div>;
If you do not provide an errorElement, the rejected value will bubble up to the nearest route-level errorElement and be accessible via the useRouteError hook.
resolve
Takes a promise returned from a deferred loader value to be resolved and rendered.
import {
  defer,
  Route,
  useLoaderData,
  Await,
} from "react-router-dom";
// given this route
<Route
  loader={async () => {
    let book = await getBook();
    let reviews = getReviews(); // not awaited
    return defer({
      book,
      reviews, // this is a promise
  element={<Book />}
function Book() {
  const {
    book,
    reviews, // this is the same promise
  } = useLoaderData();
  return (
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<ReviewsSkeleton />}>
        <Await
          // and is the promise we pass to Await
          resolve={reviews}
          <Reviews />