Fetching Data Using use

In this tutorial, you will learn how to fetch async data directly inside React components using the new use API in React 19. This is the modern, recommended way to handle data fetching without effects, loaders, or extra state.

What We Will Learn

What the use API is and why it exists
How use replaces useEffect for data fetching
How Suspense works with use
How to fetch data safely and cleanly
Real world patterns you can use immediately

By the end, you will be able to fetch data in React the same way you read variables.

Why `use` Exists

Before React 19, fetching data usually looked like this:

useEffect
useState
loading flags
error flags
multiple re-renders

This created a lot of boilerplate and mental overhead.

React 19 introduces use to let components wait for async data during rendering.

Think of it like this:

React pauses rendering until the data is ready, then continues.

The Core Idea

use lets you consume a Promise directly inside a component.

const data = use(promise)

If the promise is pending, React suspends
If it resolves, you get the value
If it rejects, React throws an error

No effects. No state. No handlers.

Basic Example

Fetch Function

Create a function that returns a Promise.

// lib/get-posts.ts
export async function getPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts")
 
  if (!res.ok) {
    throw new Error("Failed to fetch posts")
  }
 
  return res.json()
}

Using `use` Inside a Component

// app/page.tsx
import { use, Suspense } from "react"
import { getPosts } from "../lib/get-posts"
 
function Posts() {
  const posts = use(getPosts())
 
  return (
    <ul>
      {posts.slice(0, 5).map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}
 
export default function Page() {
  return (
    <>
      <title>Fetching Data with use</title>
      <meta name="description" content="React 19 use API tutorial" />
 
      <Suspense fallback={<p>Loading posts...</p>}>
        <Posts />
      </Suspense>
    </>
  )
}

What Is Happening Here

getPosts() returns a Promise
use(getPosts()) tells React to wait for it
While waiting, React shows the Suspense fallback
Once resolved, React renders with real data

There is no loading state because Suspense is the loading state.

Why This Is Better Than `useEffect`

Old Pattern Problems

Manual loading state
Extra re-renders
Harder to reason about
More code

New Pattern Benefits

Data is read like a variable
Fewer bugs
Less code
Easier mental model

Your component describes what it needs, not how to fetch it.

Error Handling with `use`

If the Promise rejects, React throws an error that can be caught by an error boundary.

// app/error.tsx
"use client"
 
export default function Error({ error }: { error: Error }) {
  return <p>Something went wrong: {error.message}</p>
}

No try/catch required in the component.

Important Rules of `use`

Only call use during render
Never wrap it in conditions
Always wrap consuming components in Suspense
The Promise must be stable per render

Good:

const data = use(fetchData())

Bad:

if (condition) {
  const data = use(fetchData())
}

Real World Mental Model

Think of use like reading from a database:

If the data is there, React reads it
If not, React waits
You never manage the waiting yourself

This makes components more declarative and predictable.

When You Should Use `use`

Use use when:

Fetching data
Reading async resources
Integrating with server components
You want simpler, cleaner code

Avoid useEffect for data fetching in React 19 unless you truly need side effects.

Conclusion

The use API changes how we think about async data in React.

Instead of managing loading and effects, you declare your data needs and let React handle the rest.

This leads to:

Cleaner components
Fewer bugs
Better performance
Better developer experience

If you are learning React 19, mastering use is essential.

React Tutorial