cache() et cacheSignal

Définition

cache(fn) mémoïse une fonction pour la durée d'une requête serveur, uniquement dans les Server Components : deux composants qui appellent la même fonction avec les mêmes arguments partagent le résultat (dédoublonnage). Le cache est vidé à chaque requête. cacheSignal(), ajouté dans React 19.2 (1er octobre 2025), fournit un AbortSignal qui se déclenche quand la durée de vie du cache se termine, pour annuler les travaux inutiles.

Analogie

Une commande groupée au restaurant : plusieurs convives demandent le même plat, la cuisine ne le prépare qu'une fois pour ce service.

Exemple de code

// lib/data.js — définir UNE fois dans un module partagé
import { cache, cacheSignal } from 'react';

export const getUser = cache(async (id) => {
  const res = await fetch(`/api/users/${id}`, { signal: cacheSignal() });
  return res.json();
});

// Deux Server Components, un seul appel réseau par requête
async function Header({ id }) { const u = await getUser(id); /* ... */ }
async function Sidebar({ id }) { const u = await getUser(id); /* ... */ }

Cas d'usage

Éviter les requêtes BDD dupliquées quand plusieurs Server Components d'une même page ont besoin de la même donnée.

Anti-pattern

Termes liés

Sources

• react.dev/reference/react/cache
• react.dev/blog/2025/10/01/react-19-2