How to use React 19 Hook

Bonus: React’s new use() hook

This one is not really a rendering strategy, but it can be very helpful when combined with things like SSR and CSR or PPR.

With React 19 and Next.js 15, you can start fetching data on the server but you don't have to wait for it right away. Then, inside a Client Component, you can use the new use() hook to read that data once it's ready.

This is useful in a few common cases:

• You are fetching data that includes secrets or tokens, which should never be exposed to the browser
• You are using server-only tools like Prisma
• You want to avoid making the same fetch twice, once on the server and once on the client

When someone visits the page, the server starts fetching the data immediately. While the data is still loading, the server sends the initial HTML to the browser to keep things fast. Once the data is ready, the server includes it in the response and React continues rendering the Client Component that uses the use() hook to read that data.

Using use() inside a Client Component automatically triggers React Suspense. This means you can wrap that component in a <Suspense> boundary and show a loading spinner or some fallback UI while the data is still loading.

This gives you a nice user experience. Your page shell appears right away, and the dynamic parts pop in smoothly when the data is ready.

1import { PostTitle } from "@/components/PostTitle";
2import { Post } from "@/lib/types";
3import { Suspense } from "react";
4
5export default function Page() {
6  const postPromise: Promise<Post> = fetch("https://jsonplaceholder.typicode.com/posts/1").then(
7    (r) => r.json(),
8  );
9
10  return (
11    <>
12      <h1 className="mb-10 text-2xl font-bold">use() Hook Example</h1>
13      <Suspense fallback={<div>Loading...</div>}>
14        <PostTitle postPromise={postPromise} />
15      </Suspense>
16    </>
17  );
18}

1"use client";
2import { Post } from "@/lib/types";
3import { use } from "react";
4
5export function PostTitle({ postPromise }: { postPromise: Promise<Post> }) {
6  const post = use(postPromise);
7  return <p>Post Title: {post.title}</p>;
8}

You can use this approach for getting data from database directly. Because you can't run prisma functions in client side. But you can start the request in server side and don't wait for data, the data will come later.