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