Practical Examples of use Hook

🔍 What Is the use Hook?

The use hook in React is an experimental feature that lets you directly await async resources inside components. It is designed primarily for React Server Components (RSC) and works seamlessly with frameworks like Next.js 13+ using the App Router. In this blog, we'll look at practical examples of how to use it. ⚙️

🌐 1. Fetching API Data Inside Server Component

You can fetch data directly from an API using async/await, and use() will suspend the component until the data is ready:

import { use } from 'react';

async function getUser() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return res.json();
}

export default function UserProfile() {
  const user = use(getUser());

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

✅ No useEffect, useState, or manual loading state — just clean and direct.

📦 2. Fetching from a Database (e.g., Prisma)

If you're working with databases in server components, `use()` works well with ORMs like Prisma:

import { use } from 'react';
import { db } from '@/lib/db';

async function getProducts() {
  return db.product.findMany();
}

export default function ProductList() {
  const products = use(getProducts());

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name} - ${p.price}</li>
      ))}
    </ul>
  );
}

🔥 Powerful server-side fetching without client-side overhead.

🔁 3. Parallel Data Fetching

You can use Promise.all to fetch multiple async resources in parallel, and pass them into use():

async function getData() {
  const [user, posts] = await Promise.all([
    fetch('https://api.example.com/user').then(res => res.json()),
    fetch('https://api.example.com/posts').then(res => res.json())
  ]);
  return { user, posts };
}

export default function Dashboard() {
  const { user, posts } = use(getData());

  return (
    <div>
      <h2>Welcome, {user.name}!</h2>
      <ul>
        {posts.map(p => <li key={p.id}>{p.title}</li>)}
      </ul>
    </div>
  );
}

🧪 4. Combining use with Suspense

If a promise takes time to resolve, React will automatically suspend rendering — and you can show a fallback with <Suspense>:

import { Suspense } from 'react';
import Profile from './Profile';

export default function Page() {
  return (
    <Suspense fallback={
Loading profile...
}>
      <Profile />
    </Suspense>
  );
}

// Profile.jsx
import { use } from 'react';

async function getProfile() {
  const res = await fetch('/api/profile');
  return res.json();
}

export default function Profile() {
  const profile = use(getProfile());
  return <p>Name: {profile.name}</p>;
}

⚠️ 5. Handling Errors in use()

If a promise inside use() rejects, React will throw — and you should use error.js in the route (Next.js) or wrap with error boundaries:

async function fetchUser() {
  const res = await fetch('https://api.example.com/user');
  if (!res.ok) throw new Error('User not found');
  return res.json();
}

export default function UserPage() {
  const user = use(fetchUser());
  return <h1>{user.name}</h1>;
}

In Next.js, errors in use() can be caught and rendered inside error.js of the current route segment.

🧠 Key Takeaways

• ✅ use() lets you await promises inside components
• ✅ Works in React Server Components only (not in the browser)
• ✅ Eliminates the need for useEffect and useState in many data-fetching use cases
• ✅ Automatically works with Suspense and concurrent rendering
• 🚫 Not available in client components or Create React App

🚀 Final Thoughts

The use() hook radically simplifies asynchronous logic in React Server Components. If you're using Next.js with the App Router, it's a clean and powerful way to fetch data, eliminate boilerplate, and boost performance. As support for React Server Components grows, expect the use() hook to become a must-have in your toolbox. 🔧🔥