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({ where: { slug } });
  if (!post) notFound();
  return post;
});

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 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 } });
});

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