mirror of
https://github.com/lobehub/lobe-chat.git
synced 2026-06-14 03:30:19 +00:00
Innei
fcdaf9d814
* v2 init * chore: update eslint suppressions and package dependencies - Removed several eslint suppressions related to array sorting and reversing from eslint-suppressions.json to clean up the configuration. - Updated @lobehub/lint package version from 2.0.0-beta.6 to 2.0.0-beta.7 in package.json for improvements and bug fixes. - Made minor formatting adjustments in vitest.config.mts and various SKILL.md files for better readability and consistency. Signed-off-by: Innei <tukon479@gmail.com> * fix: clean up import statements and formatting - Removed unnecessary whitespace in replaceComponentImports.ts for improved readability. - Standardized import statements in contextEngineering.ts and createAgentExecutors.ts by adding missing spaces for consistency. Signed-off-by: Innei <tukon479@gmail.com> * chore: update eslint suppressions and clean up code formatting * 🐛 fix: use vi.hoisted for mock variable initialization Fix TDZ error in persona service test by using vi.hoisted() to ensure mock variables are available when vi.mock factory runs. --------- Signed-off-by: Innei <tukon479@gmail.com>
77 lines
2.2 KiB
Markdown
77 lines
2.2 KiB
Markdown
---
|
|
title: Per-Request Deduplication with React.cache()
|
|
impact: MEDIUM
|
|
impactDescription: deduplicates within request
|
|
tags: 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:**
|
|
|
|
```typescript
|
|
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):**
|
|
|
|
```typescript
|
|
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):**
|
|
|
|
```typescript
|
|
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:
|
|
|
|
```typescript
|
|
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](https://react.dev/reference/react/cache)
|