Request Memoization with React cache()

Snippet

Request Memoization with React cache()

React cache allows you to memoize data fetches on a per-request basis. If multiple components in the same tree request the same data, the function only executes once, saving network resources.

snippet.js
javascript
import { cache } from 'react';
import db from './lib/db';
 
export const getUser = cache(async (id: string) => {
  const user = await db.user.findUnique({ where: { id } });
  return user;
});
 
// Usage in multiple components during the same render cycle
const user = await getUser('123');

nextjs

Breakdown

export const getUser = cache(async (id: string) => {

Wraps the database call in cache() to ensure it only runs once per server request.

const user = await getUser('123');

Subsequent calls to this function with the same ID will return the cached result immediately.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Request Memoization with React cache()

Related