Tommaso CasaburiandGitHub
a92b185a66
* chore(ai-workflow): track repo-managed review tooling * fix(ai-workflow): remove repo-specific path assumptions Make shared workflow hooks and APK testing guidance resolve paths from the repo and contributor environment so the tooling works for all contributors, not just one machine.
2.2 KiB
title, impact, impactDescription, tags
| title | impact | impactDescription | tags |
|---|---|---|---|
| Per-Request Deduplication with React.cache() | MEDIUM | deduplicates within request | server, cache, react-cache, deduplication |
Per-Request Deduplication with React.cache()
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.
Avoid inline objects as arguments:
React.cache() uses shallow equality (Object.is) to determine cache hits. Inline objects create new references each call, preventing cache hits.
Incorrect (always cache miss):
const getUser = cache(async (params: { uid: number }) => {
return await db.user.findUnique({ where: { id: params.uid } })
})
// Each call creates new object, never hits cache
getUser({ uid: 1 })
getUser({ uid: 1 }) // Cache miss, runs query again
Correct (cache hit):
const getUser = cache(async (uid: number) => {
return await db.user.findUnique({ where: { id: uid } })
})
// Primitive args use value equality
getUser(1)
getUser(1) // Cache hit, returns cached result
If you must pass objects, pass the same reference:
const params = { uid: 1 }
getUser(params) // Query runs
getUser(params) // Cache hit (same reference)
Next.js-Specific Note:
In Next.js, the fetch API is automatically extended with request memoization. Requests with the same URL and options are automatically deduplicated within a single request, so you don't need React.cache() for fetch calls. However, React.cache() is still essential for other async tasks:
- Database queries (Prisma, Drizzle, etc.)
- Heavy computations
- Authentication checks
- File system operations
- Any non-fetch async work
Use React.cache() to deduplicate these operations across your component tree.
Reference: React.cache documentation