← Back

cache() for Deduplication

Request deduplication with cache(), combining with "use cache" for cross-request caching.

PublishedMarch 5, 2026112 words
Edit

React cache()

React's cache() deduplicates requests within a single render pass.

Example: getPostBySlug

From data/queries/post-queries.ts:

import { cache } from 'react'; export const getPostBySlug = cache(async (slug: string) => { const post = await prisma.post.findUnique({ where: { slug } }); if (!post) notFound(); return post; });
import { cache } from 'react'; export const getPostBySlug = cache(async (slug: string) => { const post = await prisma.post.findUnique

Multiple components can call getPostBySlug(slug) independently—only one query executes.

Combining with "use cache"

cache() deduplicates within a render. "use cache" caches across requests:

export const getPublishedPostBySlug = cache(async (slug: string) => { 'use cache'; cacheTag(`post-${slug}`); return

Both work together—cache() prevents duplicate queries during rendering, "use cache" stores results for future requests.

(
{
where
:
{
slug
}
}
)
;
if
(
!
post
)
notFound
(
)
;
return
post
;
}
)
;
await
prisma
.
post
.
findUnique
(
{
where
:
{
slug
}
}
)
;
}
)
;
export const getPublishedPostBySlug = cache(async (slug: string) => { 'use cache'; cacheTag(`post-${slug}`); return await prisma.post.findUnique({ where: { slug } }); });