cache

const cachedFn = cache(fn);

• Référence
  • cache(fn)
• Utilisation
  • Mettre en cache un calcul coûteux
  • Partager un instantané de données
  • Précharger des données
• Dépannage
  • Ma fonction mémoïsée est ré-exécutée alors que je l’ai appelée avec les mêmes arguments

Référence

cache(fn)

Appelez cache hors de tout composant pour créer une variante d’une fonction dotée de mise en cache.

import {cache} from 'react';
import calculateMetrics from 'lib/metrics';

const getMetrics = cache(calculateMetrics);

function Chart({data}) {
  const report = getMetrics(data);
  // ...
}

Lors du premier appel de getMetrics avec data, getMetrics appellera calculateMetrics(data) et mettra le résultat en cache. Si getMetrics est rappelée avec le même argument data, elle renverra le résultat mis en cache plutôt que de rappeler calculateMetrics(data).

Voir d’autres exemples plus bas.

Paramètres

• fn : la fonction dont vous voulez mettre les résultats en cache. fn peut prendre un nombre quelconque d’arguments et renvoyer n’importe quel type de résultat.

Valeur renvoyée

cache renvoie une version de fn dotée d’un cache, avec la même signature de type. Elle n’appelle pas fn à ce moment-là.

Lors d’un appel à cachedFn avec des arguments donnés, elle vérifiera d’abord si un résultat correspondant existe dans le cache. Si tel est le cas, elle renverra ce résultat. Dans le cas contraire, elle appellera fn avec les arguments, mettra le résultat en cache et le renverra. fn n’est appelée qu’en cas d’absence de correspondance dans le cache (cache miss, NdT).

Limitations

• React invalidera le cache de toutes les fonctions mémoïsées à chaque requête serveur.
• Chaque appel à cache crée une nouvelle fonction. Ça signifie qu’appeler cache plusieurs fois avec la même fonction renverra plusieurs fonctions mémoïsées distinctes, avec chacune leur propre cache.
• cachedFn mettra également les erreurs en cache. Si fn lève une exception pour certains arguments, ce sera mis en cache, et la même erreur sera levée lorsque cachedFn sera rappelée avec ces mêmes arguments.
• cache est destinée uniquement aux Composants Serveur.

Utilisation

Mettre en cache un calcul coûteux

Utilisez cache pour éviter de dupliquer un traitement.

import {cache} from 'react';
import calculateUserMetrics from 'lib/user';

const getUserMetrics = cache(calculateUserMetrics);

function Profile({user}) {
  const metrics = getUserMetrics(user);
  // ...
}

function TeamReport({users}) {
  for (const user of users) {
    const metrics = getUserMetrics(user);
    // ...
  }
  // ...
}

Si le même objet user est affiché dans Profile et TeamReport, les deux composants peuvent mutualiser le travail et n’appeler calculateUserMetrics qu’une fois pour ce user.

Supposons que Profile fasse son rendu en premier. Il appellera getUserMetrics, qui vérifiera si un résultat existe en cache. Comme il s’agit du premier appel de getUserMetrics pour ce user, elle ne trouvera aucune correspondance. getUserMetrics appellera alors effectivement calculateUserMetrics avec ce user puis mettra le résultat en cache.

Lorsque TeamReport affichera sa liste de users et atteindra le même objet user, il appellera getUserMetrics qui lira le résultat depuis son cache.

// Temperature.js
import {cache} from 'react';
import {calculateWeekReport} from './report';

export function Temperature({cityData}) {
  // 🚩 Erroné : Appeler `cache` au sein du composant
  // crée une nouvelle `getWeekReport` à chaque rendu
  const getWeekReport = cache(calculateWeekReport);
  const report = getWeekReport(cityData);
  // ...
}

// Precipitation.js
import {cache} from 'react';
import {calculateWeekReport} from './report';

// 🚩 Erroné : `getWeekReport` n’est accessible que depuis
// le composant `Precipitation`.
const getWeekReport = cache(calculateWeekReport);

export function Precipitation({cityData}) {
  const report = getWeekReport(cityData);
  // ...
}

// getWeekReport.js
import {cache} from 'react';
import {calculateWeekReport} from './report';

export default cache(calculateWeekReport);

// Temperature.js
import getWeekReport from './getWeekReport';

export default function Temperature({cityData}) {
  const report = getWeekReport(cityData);
  // ...
}

// Precipitation.js
import getWeekReport from './getWeekReport';

export default function Precipitation({cityData}) {
  const report = getWeekReport(cityData);
  // ...
}

Partager un instantané de données

Pour partager un instantané de données d’un composant à l’autre, appelez cache sur une fonction de chargement de données telle que fetch. Lorsque plusieurs composants feront le même chargement de données, seule une requête sera faite, et ses données résultantes mises en cache et partagées à travers plusieurs composants. Tous les composants utiliseront le même instantané de ces données au sein du rendu côté serveur.

import {cache} from 'react';
import {fetchTemperature} from './api.js';

const getTemperature = cache(async (city) => {
  return await fetchTemperature(city);
});

async function AnimatedWeatherCard({city}) {
  const temperature = await getTemperature(city);
  // ...
}

async function MinimalWeatherCard({city}) {
  const temperature = await getTemperature(city);
  // ...
}

Si AnimatedWeatherCard et MinimalWeatherCard s’affichent tous deux avec la même city, ils recevront le même instantané de données depuis la fonction mémoïsée.

Si AnimatedWeatherCard et MinimalWeatherCard fournissent un argument city différent à getTemperature, alors fetchTemperature sera appelée deux fois, et chaque point d’appel recevra ses données spécifiques.

La city agit comme une clé de cache.

async function AnimatedWeatherCard({city}) {
  const temperature = await getTemperature(city);
  // ...
}

Précharger des données

En mettant en cache un chargement de données qui prendrait du temps, vous pouvez démarrer des traitements asynchrones avant de faire le rendu d’un composant.

const getUser = cache(async (id) => {
  return await db.user.query(id);
}

async function Profile({id}) {
  const user = await getUser(id);
  return (
    <section>
      <img src={user.profilePic} />
      <h2>{user.name}</h2>
    </section>
  );
}

function Page({id}) {
  // ✅ Malin : commence à charger les données utilisateur
  getUser(id);
  // ... des calculs ici
  return (
    <>
      <Profile id={id} />
    </>
  );
}

Lorsque Page fait son rendu, le composant appelle getUser, mais remarquez qu’il n’utilise pas les données renvoyées. Cet appel anticipé à getUser déclenche la requête asynchrone à la base de données, qui s’exécute pendant que Page fait d’autres calculs puis déclenche le rendu de ses enfants.

Lorsque Profile fait son rendu, nous appelons à nouveau getUser. Si l’appel initial à getUser a fini son chargement et mis en cache les données utilisateur, lorsque Profile demande ces données puis attend, il n’a plus qu’à les lire du cache, sans relancer un appel réseau. Si la requête de données initiale n’est pas encore terminée, cette approche de préchargement réduit tout de même le délai d’obtention des données.

async function fetchData() {
  return await fetch(`https://...`);
}

const getData = cache(fetchData);

async function MyComponent() {
  getData();
  // ... des calculs ici
  await getData();
  // ...
}

import {cache} from 'react';

const getUser = cache(async (userId) => {
  return await db.user.query(userId);
});

// 🚩 Erroné : Appeler une fontion mémoïsée hors d’un composant
// n’exploitera pas le cache.
getUser('demo-id');

async function DemoProfile() {
  // ✅ Correct : `getUser` exploitera le cache.
  const user = await getUser('demo-id');
  return <Profile user={user} />;
}

'use client';

function WeatherReport({record}) {
  const avgTemp = useMemo(() => calculateAvg(record)), record);
  // ...
}

function App() {
  const record = getRecord();
  return (
    <>
      <WeatherReport record={record} />
      <WeatherReport record={record} />
    </>
  );
}

const cachedFetchReport = cache(fetchReport);

function WeatherReport({city}) {
  const report = cachedFetchReport(city);
  // ...
}

function App() {
  const city = "Paris";
  return (
    <>
      <WeatherReport city={city} />
      <WeatherReport city={city} />
    </>
  );
}

'use client';

function WeatherReport({record}) {
  const avgTemp = calculateAvg(record);
  // ...
}

const MemoWeatherReport = memo(WeatherReport);

function App() {
  const record = getRecord();
  return (
    <>
      <MemoWeatherReport record={record} />
      <MemoWeatherReport record={record} />
    </>
  );
}

Dépannage

Ma fonction mémoïsée est ré-exécutée alors que je l’ai appelée avec les mêmes arguments

Voyez déjà les pièges signalés plus haut :

• Appeler des fonctions mémoïsées distinctes lira des caches distincts
• Appeler une fonction mémoïsée hors d’un composant n’utilisera pas le cache

Si rien de tout ça ne s’applique, le problème peut être lié à la façon dont React vérifie l’existence de quelque chose dans le cache.

Si vos arguments ne sont pas des primitives (ce sont par exemple des objets, des fonctions, des tableaux), assurez-vous de toujours passer la même référence d’objet.

Lors d’un appel à une fonction mémoïsée, React utilisera les arguments passés pour déterminer si un résultat existe déjà dans le cache. React utilisera pour ce faire une comparaison superficielle des arguments.

import {cache} from 'react';

const calculateNorm = cache((vector) => {
  // ...
});

function MapMarker(props) {
  // 🚩 Erroné : les props sont un objet différent à chaque rendu.
  const length = calculateNorm(props);
  // ...
}

function App() {
  return (
    <>
      <MapMarker x={10} y={10} z={10} />
      <MapMarker x={10} y={10} z={10} />
    </>
  );
}

Dans le cas ci-dessus, les deux MapMarker semblent faire exactement la même chose et appeler calculateNorm avec les mêmes valeurs {x: 10, y: 10, z:10}. Même si les objets contiennent des valeurs identiques, il ne s’agit pas d’une unique référence à un même objet, car chaque composant crée son propre objet props.

React appellera Object.is sur chaque argument pour vérifier l’existence dans le cache.

import {cache} from 'react';

const calculateNorm = cache((x, y, z) => {
  // ...
});

function MapMarker(props) {
  // ✅ Correct : passe des primitives à la fonction mémoïsée
  const length = calculateNorm(props.x, props.y, props.z);
  // ...
}

function App() {
  return (
    <>
      <MapMarker x={10} y={10} z={10} />
      <MapMarker x={10} y={10} z={10} />
    </>
  );
}

Une façon de remédier à ça consiste à passer les dimensions du vecteur à calculateNorm. Ça fonctionne parce que chaque dimension passée est une valeur primitive.

Vous pourriez aussi passer l’objet vecteur lui-même comme prop au composant. Il vous faudrait toutefois passer le même objet en mémoire aux deux instances du composant.

import {cache} from 'react';

const calculateNorm = cache((vector) => {
  // ...
});

function MapMarker(props) {
  // ✅ Correct : passe le même objet `vector`
  const length = calculateNorm(props.vector);
  // ...
}

function App() {
  const vector = [10, 10, 10];
  return (
    <>
      <MapMarker vector={vector} />
      <MapMarker vector={vector} />
    </>
  );
}