The use() API 🧵

React 19 introduces use() as a low-level primitive to consume promises or context inside render logic, simplifying Suspense-driven data flows.

1) Consuming Promises During Render 🔄


import { use } from "react";
 
function UserCard({ userPromise }) {
  const user = use(userPromise); // suspense-aware read
  return (
    <article>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </article>
  );
}

If the promise is pending, React throws it to the nearest Suspense boundary.
On resolution, the component resumes rendering with the fulfilled value.
Errors propagate to the nearest error boundary.

🧠 Think of use(promise) as “await” for components, but orchestrated by React’s Suspense runtime.

2) Composing Data Dependencies 🧩

Nest multiple use() calls to sequence dependent data.
Combine with Promise.all for parallel fetching.


function Dashboard({ summaryPromise, notificationsPromise }) {
  const [summary, notifications] = use(Promise.all([summaryPromise, notificationsPromise]));
  return (
    <section>
      <Summary data={summary} />
      <Notifications items={notifications} />
    </section>
  );
}

Suspense boundary wraps the dashboard to show fallback while either promise loads.

3) Reading Context via use() 🌐

use(MyContext) is equivalent to useContext(MyContext) but can run outside components in RSC or utilities.


const theme = use(ThemeContext);

Useful when writing helper functions shared between server and client components that need context access without prop threading.

4) Suspense-driven Composition 🧱

Because use() throws pending promises, place Suspense boundaries strategically to group related UI.
Pair with useTransition, useDeferredValue, or startTransition for fine-grained loading experiences.


<Suspense fallback={<Skeleton />}> 
  <UserCard userPromise={userPromise} />
</Suspense>

For nested loading states, stack Suspense boundaries (e.g., page shell → widget-level).

Key Takeaways ✅

use() is a synchronous-looking primitive for promises/context inside render.
Suspense controls the flow: pending promises pause rendering, fallbacks show progress, and resumption happens automatically.
Use it sparingly—prefer higher-level data frameworks unless you need granular control.

Recap 🔄

React 19’s use() collapses async reads into a single call: render code can synchronously “await” data while Suspense manages the lifecycle. Combine it with thoughtful boundaries to keep loading states precise and composable.