React has been steadily evolving toward a model where components can work more naturally with asynchronous data and external resources. One of the most significant additions in modern React is the use() API, a new primitive designed to simplify how components consume promises and context values.

Unlike traditional hooks such as useState() and useEffect(), use() changes the way developers think about asynchronous rendering. It allows components to directly read values during rendering, enabling cleaner code patterns and better integration with React Server Components.

This article explores what React use() is, how it works, when to use it, and how it changes common React development patterns.

What Is React use()?

use() is a React API that allows components to read resources such as promises or context values during rendering.

A simplified example looks like this:

import { use } from "react";
 
function UserProfile({ userPromise }) {
  const user = use(userPromise);
 
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

Instead of manually tracking loading states with useState() and fetching data inside useEffect(), the component can consume the promise directly.

When React encounters a promise that has not resolved yet, it pauses rendering and works with the Suspense mechanism to display a fallback UI.

This creates a much more declarative approach:

• Components describe what data they need.
• React manages the waiting process.
• Suspense handles loading states.

Why Was use() Introduced?

Before use(), asynchronous data fetching in React often required patterns like this:

function UserProfile() {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    fetch("/api/user")
      .then((response) => response.json())
      .then(setUser);
  }, []);
 
  if (!user) {
    return <p>Loading...</p>;
  }
 
  return <h1>{user.name}</h1>;
}

Although this works, it introduces several challenges:

• Data fetching happens after the initial render.
• Loading and error states must be manually managed.
• Components become responsible for coordinating asynchronous behavior.
• Waterfall requests can easily occur.

The use() API moves asynchronous reading into the rendering phase, allowing React to coordinate the process.

The component becomes simpler:

function UserProfile({ userPromise }) {
  const user = use(userPromise);
 
  return <h1>{user.name}</h1>;
}

The complexity moves into React's rendering system instead of being duplicated across every component.

How use() Works With Suspense

The key feature behind use() is its integration with Suspense.

Consider this example:

import { Suspense } from "react";
 
function App({ userPromise }) {
  return (
    <Suspense fallback={<p>Loading user...</p>}>
      <UserProfile userPromise={userPromise} />
    </Suspense>
  );
}

If userPromise has not completed, React suspends the UserProfile component and renders the fallback.

Once the promise resolves, React retries rendering the component with the completed value.

This creates a clean separation:

• Components define their data requirements.
• Suspense defines what users see while waiting.

This pattern is especially powerful when multiple components need different asynchronous resources.

<Suspense fallback={<Loading />}>
  <Dashboard />
</Suspense>

Each component inside the tree can independently use asynchronous resources while React coordinates the rendering process.

Using use() With Context

Although promises are the most commonly discussed use case, use() can also read context.

Traditionally, context is consumed with useContext():

const theme = useContext(ThemeContext);

With use(), the same operation becomes:

const theme = use(ThemeContext);

The difference is that use() can be called conditionally.

For example:

function Button({ compact }) {
  if (compact) {
    const theme = use(ThemeContext);
 
    return <button className={theme.button}>Compact Button</button>;
  }
 
  return <button>Normal Button</button>;
}

This is different from normal hooks, which must always be called in the same order on every render.

use() Rules and Limitations

Although use() is more flexible than traditional hooks, it still has important rules.

It Must Be Called During Rendering

use() can only be used while React is rendering a component.

You cannot call it inside event handlers:

function Button() {
  async function handleClick() {
    const data = use(fetchData()); // Invalid
  }
 
  return <button onClick={handleClick}>Load</button>;
}

Instead, initiate the resource outside the event handler or use other state management approaches.

Promises Should Be Stable

A common mistake is creating promises directly during rendering:

function Component() {
  const data = use(fetch("/api/data"));
 
  return <div>{data}</div>;
}

This creates a new promise every render.

Instead, promises should typically be created in a parent component, server-side loader, or caching layer:

function Page() {
  const dataPromise = getData();
 
  return <Component dataPromise={dataPromise} />;
}

Frameworks such as Next.js provide built-in patterns for managing these resources efficiently.

use() in React Server Components

The biggest impact of use() is in React Server Components.

Frameworks such as Next.js App Router allow server components to directly await data:

async function Page() {
  const posts = await getPosts();
 
  return <PostList posts={posts} />;
}

However, when passing promises between server and client components, use() becomes useful:

export default function Page() {
  const postsPromise = getPosts();
 
  return <PostList postsPromise={postsPromise} />;
}

Then:

"use client";
 
import { use } from "react";
 
function PostList({ postsPromise }) {
  const posts = use(postsPromise);
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

This allows data fetching to begin earlier while still allowing client components to consume the result.

Comparing use() and useEffect()

The two APIs solve different problems.

use() does not replace useEffect().

Effects are still necessary for operations such as:

• Subscribing to browser events.
• Connecting to external services.
• Updating non-React systems.

However, fetching data purely to display UI is increasingly moving toward Suspense and use() patterns.

The Future of React Data Fetching

React use() represents a shift toward a more declarative programming model.

Instead of writing:

1. Start a request.
2. Store loading state.
3. Store error state.
4. Update state when finished.
5. Render the result.

Developers can describe the dependency:

const data = use(resource);

React then coordinates rendering, scheduling, and loading behavior.

This aligns with React's broader direction: components should describe UI based on available data, while the framework manages when and how that UI appears.