React 19+ · Function

cache

cache memoizes a function's results for React Server Components during a server request. Matching arguments reuse prior work, while cache misses execute and store the function result.

How it works

Use cache to wrap a function whose data fetch or computation may be requested repeatedly by React Server Components. React memoizes results by arguments during a server request, allowing components in that render to reuse the same work.

Syntax

const cachedFn = cache(fn)

Parameters

Name	Type	Description
`fn`	`function`	The function whose results React should memoize; it may accept any arguments and return any value.

Returns

A memoized version of fn with the same type signature; creating it does not call fn.

Key points

Wrap data access or computation when repeated requests for the same inputs would otherwise duplicate work.
Declare the memoized wrapper at module scope so it can be shared by Server Components.
Creating the wrapper is lazy: the original function runs only when the returned function is invoked.
A matching cached result avoids executing the original function again for that call.
Caching a fetch can make components in one server render observe the same data snapshot.
The returned function preserves the wrapped function's callable shape and result type.

Common mistakes

Do not use this API for Client Components; the documented support is limited to React Server Components.
Do not expect cached values to persist between separate server requests.
Define the cached wrapper once, rather than repeatedly wrapping the same function and expecting those wrappers to share results.
Calling the memoized function outside component execution bypasses React's cache access.

Example: Cache a server-side data fetch

import { cache } from 'react';

const getUser = cache(async (id: string) => {
  const response = await fetch(`https://api.example.com/users/${id}`);
  if (!response.ok) throw new Error('Request failed');
  return response.json() as Promise<{ id: string; name: string }>;
});

export default async function Profile({ id }: { id: string }) {
  const user = await getUser(id);
  return <h1>{user.name}</h1>;
}

This Server Component can call the cached function from multiple components during one server render; identical arguments reuse the result.

When to use it

Share a data snapshot

Several Server Components request the same resource during one render.

Skip duplicate computation

An expensive server-side calculation is repeated with identical inputs.

Centralize server data fetching

A tree needs one reusable data-access abstraction.

Interview questions

QWhat does cache do?

cache(fn) returns another function with the same type signature and does not invoke fn immediately. On a call, React returns a stored result for matching arguments; otherwise it runs fn, stores the result, and returns it.

Follow-up: How is the cache scoped? It is invalidated for every server request, so it is not a general persistent application cache.

QWhere should a cached function be declared?

Create the cached wrapper outside components. This gives multiple Server Components access to the same memoized function during a server render and avoids duplicate work for equal arguments.

Follow-up: What happens if two wrappers are created from the same original function? They are distinct memoized functions and do not share a cache.

QHow does React decide whether to reuse a result?

The wrapped function may accept any arguments and return any value. React uses the arguments passed to the cached function to determine whether a result is already available.

Follow-up: Can a component call the wrapper and still miss the cache? Yes, calls made outside component execution evaluate the function without reading or updating React's cache.

cacheSignal
fetch
React Server Components

Source: cache – React. Checked 2026-10-15.