React 19 introduces a powerful new API called use, which simplifies handling asynchronous operations in components. This API enables developers to directly consume promises and context, leading to cleaner and more intuitive code.

What is the use API?

The use API allows you to use promises inside components without needing explicit state management. Previously, handling asynchronous data required using useEffect and maintaining state manually, but with use, React can suspend rendering until the promise resolves.

Basic Example of use

Let’s start with a simple example where we fetch user data using use.

import { use } from "react";

function fetchUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: "John Doe", age: 30 });
    }, 2000);
  });
}

const userPromise = fetchUser();

function UserProfile() {
  const user = use(userPromise);
  return (
    <div>
      <h2>Name: {user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}

export default UserProfile;

Explanation

• We define a function fetchUser that returns a promise resolving after 2 seconds.
• We call fetchUser() outside the component to initiate fetching before rendering.
• Inside the UserProfile component, we use use(userPromise), allowing React to suspend rendering until the promise resolves.

Using use with Context

The use API can also be used with context values provided asynchronously. Here’s an example:

import { createContext, use, useState, useEffect } from "react";

const UserContext = createContext(null);

function UserProvider({ children }) {
  const [userPromise, setUserPromise] = useState(null);

  useEffect(() => {
    setUserPromise(fetchUser());
  }, []);

  return (
    <UserContext.Provider value={userPromise}>{children}</UserContext.Provider>
  );
}

function UserProfile() {
  const user = use(useContext(UserContext));
  return (
    <div>
      <h2>Name: {user.name}</h2>
      <p>Age: {user.age}</p>
    </div>
  );
}

function App() {
  return (
    <UserProvider>
      <UserProfile />
    </UserProvider>
  );
}

export default App;

Explanation

• We create a UserContext to hold a promise that fetches user data.
• The UserProvider initializes this promise and provides it via context.
• Inside UserProfile, we use use(useContext(UserContext)), which waits for the promise to resolve before rendering.

Benefits of use

• Simplifies asynchronous data handling by eliminating manual state management.
• Reduces boilerplate compared to useEffect and useState.
• Improves performance with automatic suspense support.

Conclusion

The use API in React 19 is a game-changer for handling asynchronous operations within components. By enabling direct consumption of promises and context, it significantly streamlines development and improves performance.