Suspense and resources: A first example

A first example

useResource(fetcher) calls fetcher when it is created and returns a handle.

For agentsUpdated 2026-10-20

useResource(fetcher) calls fetcher when it is created and returns a handle. Calling the handle reads the value. While the first load is pending, a read inside a Suspense boundary keeps that boundary showing its fallback.

src/profile.tsxtsx

import { useResource } from "@shadow-js/core";
import { Suspense } from "@shadow-js/web";

function Name() {
  const name = useResource(() => Promise.resolve("Ada"));
  return <b>{name()}</b>;
}

export function Page() {
  return (
    <Suspense fallback={<i>loading</i>}>
      <Name />
    </Suspense>
  );
}