In this tutorial, you will learn exactly what the new use API is, why it exists, and how to use it correctly in modern React applications.

The use API changes how React handles async data, promises, and context, removing a lot of boilerplate that previously required useEffect, loading states, and manual synchronization.

What You Will Learn in This Tutorial

In this tutorial, you will learn:

• What the new use API is in React 19
• Why it replaces many older React data fetching patterns
• How use works with promises
• How to fetch and render data using use
• How use fits naturally with Suspense
• When and where you should use use in real applications

This tutorial is written for beginners and assumes you are learning modern React for the first time.

Why the use API Exists

Before React 19, fetching data in components usually required:

• useEffect
• Local loading state
• Local error state
• Extra re-renders
• Complex logic that mixed data fetching with UI logic

This made simple components feel complicated.

React 19 introduces the use API to solve this problem.

The goal is simple:

Let components read async data directly, just like reading a variable.

What Is the use API

The use API allows a component to read the value of a promise.

If the promise is still pending, React automatically suspends rendering until the promise resolves.

You do not manage loading state manually.

You do not use useEffect.

You do not store fetched data in local state.

Basic Idea

const data = use(somePromise);

React handles everything else.

A Simple Data Fetching Example

Let’s start with a very simple fetch function.

function fetchUser() {
  return fetch("https://api.example.com/user")
    .then(res => res.json());
}

Now use it directly inside a component.

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

That is it.

No useEffect. No loading state. No conditional rendering.

How This Works Behind the Scenes

Think of use like this:

• If the promise is resolved, React gives you the value
• If the promise is pending, React pauses rendering
• If the promise fails, React throws an error

React controls the flow, not your component.

This is why use must be paired with Suspense.

Using use with Suspense

Suspense defines what the user sees while data is loading.

import { Suspense } from "react";
 
function App() {
  return (
    <>
      <title>User Profile</title>
      <meta name="description" content="Using the use API in React 19" />
 
      <Suspense fallback={<p>Loading user...</p>}>
        <UserProfile />
      </Suspense>
    </>
  );
}

The fallback UI renders automatically while fetchUser() is pending.

Multiple Async Values with use

You can call use multiple times in the same component.

function fetchPosts() {
  return fetch("https://api.example.com/posts")
    .then(res => res.json());
}
 
function Dashboard() {
  const user = use(fetchUser());
  const posts = use(fetchPosts());
 
  return (
    <div>
      <h1>Welcome {user.name}</h1>
 
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

React suspends until all required data is ready.

Where You Should Use use

The use API is ideal for:

• Server Components
• Shared data loading logic
• Clean, declarative UI
• Removing useEffect for data fetching
• Avoiding unnecessary state

It works best when your component reads data, not manages data lifecycles.

Common Beginner Mistakes

Using use Inside Conditionals

Do not do this:

if (isLoggedIn) {
  const user = use(fetchUser());
}

Always call use at the top level of your component.

Trying to Catch Errors Manually

Do not wrap use in try/catch.

React expects errors to be handled by Error Boundaries.

Replacing All Hooks with use

use is not a replacement for every hook.

It is specifically for:

• Promises
• Context values
• Resources managed by React

Mental Model to Remember

Think of use as:

Reading data that React promises will exist.

You are not fetching data. You are declaring a dependency.

React handles the timing.

Conclusion

The new use API is one of the most important improvements in React 19.

It allows you to:

• Write simpler components
• Remove unnecessary state
• Avoid useEffect for data fetching
• Let React control async rendering
• Build more predictable UIs

As a beginner, learning use early will help you write modern React the right way from day one. Embrace it, and enjoy the simplicity it brings to your React applications!