React: What is React 19 cache function?

React 19 cache() memoizes values per request (server components only).

Code:

1import { cache } from "react";
2
3// Cache database calls
4const getUser = cache(async (id: string) => {
5  const response = await fetch(`/api/users/${id}`);
6  return response.json();
7});
8
9// Server Component
10async function UserPage({ params }) {
11  // Both calls use same cache within request
12  const user = await getUser(params.id);
13  const profile = await getUser(params.id); // cached!
14
15  return (
16    <div>
17      <h1>{user.name}</h1>
18      <p>{profile.bio}</p>
19    </div>
20  );
21}

How it works:

1. First call → executes, stores result
2. Subsequent calls with same args → returns cached
3. Cache is per-request (not global)
4. Cleared after request completes

Benefits:

• Eliminates duplicate API calls
• Works across server components
• Request-scoped (no memory leaks)

vs useMemo:

• useMemo: client-side, persists across renders
• cache(): server-side, per-request

vs useEffect:

• useEffect: runs after render, can cause waterfalls
• cache(): runs during render, enables parallelism