<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:

  1. <Suspense>
  2.   <Await resolve={deferredValue}>
  3.     {(data) => <p>{data}</p>}
  4.   </Await>
  5. </Suspense>

Or indirectly via the useAsyncValue hook:

  1. function Accessor() {
  2.   const value = useAsyncValue();
  3.   return <p>{value}</p>;
  4. }
  5. // ...
  6. <Suspense>
  7.   <Await resolve={deferredValue}>
  8.     <Accessor />
  9.   </Await>
  10. </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.