Await

An async server component that awaits a promise and renders its result through a render function.

Await is an async React Server Component that awaits promise and returns children(result). Use it inside Suspense to stream slower data while the rest of the page renders. It requires a React Server Components environment such as the Next.js App Router and cannot be rendered from a client component.

demo.tsx

import { Suspense } from "react";
import { Await } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

type Story = { id: string; title: string };

const stories = Promise.resolve<Story[]>([
  { id: "a", title: "Quarterly results beat forecasts" },
  { id: "b", title: "New office opens in Lisbon" },
]);

export default function AwaitDemo() {
  return (
    <Suspense fallback={<Text color="secondary">Loading stories…</Text>}>
      <Await promise={stories}>
        {(items) => (
          <Box as="ul" m="0" pl="l">
            {items.map((story) => (
              <Text as="li" key={story.id}>
                {story.title}
              </Text>
            ))}
          </Box>
        )}
      </Await>
    </Suspense>
  );
}

Import#

typescript

import { Await } from "@reactberry/system/blocks";

Usage#

typescript

import { Suspense } from "react";
import { Await } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

type Story = { id: string; title: string };

async function getRecentNews(): Promise<Story[]> {
  const res = await fetch("https://example.com/api/news");
  return res.json();
}

export default function NewsPage() {
  return (
    <Box p="l">
      <Text as="h1" fontSize="l">News</Text>
      <Suspense fallback={<Text color="secondary">Loading stories…</Text>}>
        <Await promise={getRecentNews()}>
          {(stories) => (
            <Box as="ul">
              {stories.map((story) => (
                <Text as="li" key={story.id}>{story.title}</Text>
              ))}
            </Box>
          )}
        </Await>
      </Suspense>
    </Box>
  );
}

API#

Await#

Prop	Type	Default	Description
`promise*`	`Promise<T>`	—	The promise to await.
`children*`	`(result: T) => JSX.Element`	—	Render function called with the resolved value.

No other props are accepted. T is inferred from promise.

Notes#

Wrap Await in Suspense to show a fallback while the promise is pending; without a boundary, the parent waits for the promise before rendering.
A rejected promise is thrown during rendering and is handled by the nearest error boundary (for example a Next.js error.tsx).
children must return a JSX.Element; returning null or a string does not satisfy the type.