Why must Promises passed to React use be cached or reused across renders?

Direct answer

Creating a fresh Promise during every render gives React a different resource each time, which can cause repeated suspension; use a cached Promise, framework data source, or Promise passed from a Server Component.

Albums.jsx

function Albums() {
  // Avoid: a new Promise is created every render.
  const albums = use(fetch("/api/albums"));

  return <AlbumList albums={albums} />;
}

The component needs a stable resource identity so React can retry rendering against the same asynchronous work instead of continuously discovering a brand-new pending Promise.