`<Await>`

To get started with streaming data, check out the Streaming Guide.

The <Await> component is responsible for resolving deferred loader promises accessed from useLoaderData.

import { Await } from "@remix-run/react";  <Suspense fallback={<div>Loading...</div>}>  <Await resolve={somePromise}>  {(resolvedValue) => <p>{resolvedValue}</p>}  </Await> </Suspense>;

Props

`resolve`

The resolve prop takes a promise from useLoaderData to resolve when the data has streamed in.

<Await resolve={somePromise} />

When the promise is not resolved, a parent suspense boundary's fallback will be rendered.

<Suspense fallback={<div>Loading...</div>}>  <Await resolve={somePromise} /> </Suspense>

When the promise is resolved, the children will be rendered.

`children`

The children can be a render callback or a React element.

<Await resolve={somePromise}>  {(resolvedValue) => <p>{resolvedValue}</p>} </Await>

If the children props is a React element, the resolved value will be accessible through useAsyncValue in the subtree.

<Await resolve={somePromise}>  <SomeChild /> </Await>

import { useAsyncValue } from "@remix-run/react";  function SomeChild() {  const value = useAsyncValue();  return <p>{value}</p>; }

`errorElement`

The errorElement prop can be used to render an error boundary when the promise rejects.

<Await errorElement={<div>Oops!</div>} />

The error can be accessed in the subtree with useAsyncError

<Await errorElement={<SomeChild />} />

import { useAsyncError } from "@remix-run/react";  function SomeChild() {  const error = useAsyncError();  return <p>{error.message}</p>; }