Per-Request Deduplication with React.cache()
Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
React.cache() provides a memoization mechanism specifically for server-side operations during a single HTTP request lifecycle. By wrapping asynchronous functions like database lookups, API calls, or authentication checks, it ensures that identical execution logic with matching arguments triggers only one actual operation. Subsequent calls within the same request tree receive the stored result instead of re-executing the network or disk I/O. This pattern significantly reduces redundant latency and overhead in deep component trees where child components might otherwise trigger duplicate fetches for shared data. It is restricted to the scope of one request, meaning data is not shared between users or persisted across different navigation events, making it a safe choice for handling sensitive, user-specific information without the risks associated with global or cross-request state management.
When to Use This Skill
- •Fetching the authenticated user profile in multiple sidebar and header components
- •Retrieving static site configuration settings shared across page sub-sections
- •Running repeated database lookups for permission checks within layout wrappers
- •Consolidating multiple calls to external CMS endpoints for content rendering
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Stop making redundant database queries in my React Server Components
- “How to prevent multiple network calls for the same user data
- “Optimize server-side fetching when multiple components need the same record
- “Implement request-scoped memoization in Next.js
- “Fix duplicate API requests during a single page render
What this skill does
- •Memoizes return values of async functions per request
- •Prevents duplicate database queries in deep component trees
- •Limits network overhead by coalescing identical API calls
- •Maintains scoped state visibility for individual server requests
- •Avoids prop drilling for shared data dependencies
When not to use it
- ✕When functions require side effects that must run every time
- ✕For data that needs to be fresh and updated within a single request cycle
- ✕When the input arguments change frequently, rendering the cache hit rate ineffective
Example workflow
- Define a helper function for a database query wrapped with cache()
- Import this wrapped function into multiple server components
- Place the function calls at the top of several deeply nested components
- Execute the page request to initiate the rendering pipeline
- Verify via logs that the underlying database driver receives only one command
Prerequisites
- –Next.js App Router environment
- –React Server Components
Pitfalls & limitations
- !Cache scope is strictly limited to one HTTP request
- !Does not handle data mutations or updates within the same request
- !Can hide performance issues caused by inefficient component architecture
FAQ
How it compares
Unlike manual singleton patterns or global variables that risk leaking data between users, React.cache() is natively scope-aware and specifically designed for the isolation requirements of server-side web requests.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Use
React.cache() for server-side request deduplication. Authentication and database queries benefit most.**Usage:**
import { cache } from 'react'
export const getCurrentUser = cache(async () => {
const session = await auth()
if (!session?.user?.id) return null
return await db.user.findUnique({
where: { id: session.user.id }
})
})Within a single request, multiple calls to
getCurrentUser() execute the query only once.How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/server-cache-react/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/vercel-labs/agent-skills/server-cache-react/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/server-cache-react/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/server-cache-react/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
