<Await>

The <Await> component is responsible for resolving promises accessed from useLoaderData. This can be thought of as a thin wrapper around React Error Boundaries with support for handling SSR that will suspend to resolve the data of a deferred loader value.

<Await> can be used to resolve the deferred value in one of two ways:

Directly as a render function:

<Suspense>
  <Await resolve={deferredValue}>
    {(data) => <p>{data}</p>}
  </Await>
</Suspense>

Or indirectly via the useAsyncValue hook:

function Accessor() {
  const value = useAsyncValue();
  return <p>{value}</p>;
}
// ...
<Suspense>
  <Await resolve={deferredValue}>
    <Accessor />
  </Await>
</Suspense>;

<Await> is paired with defer() in your loader. Returning a deferred value from your loader will put Remix in streaming mode and allow you to render fallbacks with <Suspense>. A full example can be found in the streaming guide.