Suspend Concurrently

Promise concurrency primitives for React Suspense.

• suspendAll(promises)
• suspendRace(promises)
• suspendAny(promises)
• suspendAllSettled(promises)

These work just like the Promise.all, Promise.race, Promise.any, and Promise.allSettled methods, but are suitable to be used inside of React 18. See the MDN docs for more information.

Usage

These utilities are intended to be used with Remix's deferred data APIs, but they can also be used anywhere you need to compose multiple promises together and resolve them concurrently.

In remix:

1export function loader() {
2  return defer({
3    deferredUserName: fetchUserName(),
4    deferredUserAvatar: fetchUserAvatar(),
5  });
6}
7
8export default function UserRoute() {
9  const {deferredUserName, deferredUserAvatar} = useLoaderData();
10  const userPromise = suspendAll([deferredUserName, deferredUserAvatar]);
11
12  return (
13    <Suspense fallback={<Loading />}>
14      <Await resolve={userPromise}>
15        {([name, avatar]) => (
16          <div>
17            <img src={avatar} />
18            <h1>{name}</h1>
19          </div>
20        )}
21      </Await>
22    </Suspense>
23  );
24}