await

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Await component purpose

The Await component is used to render promise values with automatic error handling. It expects to be rendered inside a React.Suspense component.

Await signature

The Await component signature is: function Await<Resolve>({ children, errorElement, resolve }: AwaitProps<Resolve>). It is a generic function that takes three props: children, errorElement, and resolve.

Await children prop with function

The children prop can be a function that receives the resolved value as a parameter: <Await resolve={reviewsPromise}>{(resolvedReviews) => <Reviews items={resolvedReviews} />}</Await>

Await children prop with React elements and useAsyncValue

The children prop can be React elements instead of a function. When using elements, the useAsyncValue hook provides the resolved value to child components: <Await resolve={reviewsPromise}><Reviews /></Await> where Reviews calls useAsyncValue() to access the resolved value.

Await errorElement prop

The errorElement prop accepts a React element that renders when the Promise rejects. If errorElement is not provided, the rejected value bubbles up to the nearest route-level ErrorBoundary and is accessible via the useRouteError hook.

Await errorElement with useAsyncError

To provide contextual error information, use the useAsyncError hook inside a child component of errorElement: <Await errorElement={<ReviewsError />} resolve={reviewsPromise}><Reviews /></Await> where ReviewsError calls useAsyncError() to access the error message.

Await resolve prop

The resolve prop accepts a Promise returned from a loader function. The Promise should not be awaited in the loader so it can be rendered by Await, while other data can be awaited to block the transition.

Await component example with loader

Example showing Await usage: In the loader, return { book: await fetch('/api/book').then(res => res.json()), reviews: getReviews() }. In the component, use useLoaderData() to get the values, then pass the reviews promise to Await with errorElement and children function.

Await requires React.Suspense

The Await component must be rendered inside a React.Suspense component that provides a fallback UI while the promise is resolving.

useAsyncError hook signature and return type

The useAsyncError hook has the signature 'function useAsyncError(): unknown'. It returns the error that was thrown in the nearest Await component.

useAsyncError returns rejection value from Await

useAsyncError returns the rejection value from the closest Await component. It is used to access error information within an error element.

useAsyncError import and basic usage example

To use useAsyncError, import it from 'react-router'. Example: function ErrorElement() { const error = useAsyncError(); return <p>Uh Oh, something went wrong! {error.message}</p>; } and then pass this component as the errorElement prop to an Await component.

useAsyncValue hook basic usage

useAsyncValue is a hook that returns the resolved promise value from the closest <Await> component. It can be called in any descendant component of an <Await> component.

useAsyncValue signature

useAsyncValue has the signature: function useAsyncValue(): unknown. It takes no parameters and returns the resolved value of type unknown.

useAsyncValue returns resolved Await value

useAsyncValue returns the resolved value from the nearest <Await> component in the component tree.

useAsyncValue example with Await component

Example usage: function SomeDescendant() { const value = useAsyncValue(); // ... } // somewhere in your app <Await resolve={somePromise}><SomeDescendant /></Await>

Give your agent this brain