React: What is React 19 cache function?

React 19 introduces cache() for request-level memoization in Server Components. It caches the result of an expensive function call (like a database query) so that multiple calls with the same arguments within a single request return the cached result.

How it works:

1. First call → executes the function, stores the result
2. Subsequent calls with the same arguments → returns the cached result
3. Cache is per-request (not global) — cleared after the request completes
4. Different requests get independent caches

Complete code example:

1import { cache } from "react";
2
3// Cache an expensive database call
4const getUser = cache(async (id: string) => {
5  console.log(`Fetching user ${id}`); // Only logs once per request
6  const response = await fetch(`/api/users/${id}`);
7  return response.json();
8});
9
10// Cache another expensive call
11const getPosts = cache(async (userId: string) => {
12  const response = await fetch(`/api/users/${userId}/posts`);
13  return response.json();
14});
15
16// Server Component
17async function UserPage({ params }: { params: { id: string } }) {
18  // Both calls use the same cache — only one fetch happens
19  const user = await getUser(params.id);
20  const profile = await getUser(params.id); // cached!
21
22  // This is a different function, so it runs separately
23  const posts = await getPosts(params.id);
24
25  return (
26    <div>
27      <h1>{user.name}</h1>
28      <p>{user.email}</p>
29      <h2>Posts ({posts.length})</h2>
30      <ul>
31        {posts.map(post => (
32          <li key={post.id}>{post.title}</li>
33        ))}
34      </ul>
35    </div>
36  );
37}

Benefits:

• Eliminates duplicate API calls within a single request
• Works across server components — different components calling getUser(123) share the cache
• Request-scoped — no memory leaks, cache is cleared after each request
• Zero configuration — just wrap your function with cache()

Comparison with other approaches: | Approach | Scope | Use Case | |---------|-------|----------| | cache() | Per-request (server) | Deduplicate DB calls in server components | | useMemo | Per-render (client) | Cache expensive computations in client components | | useEffect + state | Per-render (client) | Fetch data after render (causes waterfalls) | | TanStack Query | Global (client) | Cache server data with stale-while-revalidate |

Important: cache() only works in server components. For client-side caching, use React Query, SWR, or useMemo.