React Academy · Leçon

Mémoriser les valeurs de contexte avec useMemo

Enveloppez les objets de valeur du contexte dans useMemo afin d’éviter les nouveaux rendus inutiles des consommateurs.

Mémoriser les valeurs de contexte avec useMemo est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous allez apprendre pourquoi les objets représentant les valeurs du contexte doivent être mémorisés avec useMemo et comment configurer correctement les dépendances pour éviter les nouveaux rendus inutiles.

Le problème des références d’objet

Chaque fois qu’un composant Provider effectue un nouveau rendu, un nouveau littéral d’objet `{ ... }` est créé comme valeur du contexte, même si son contenu est identique. Tous les consommateurs effectuent un nouveau rendu, car la référence a changé.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Corriger le problème avec useMemo

Encapsulez la valeur du contexte dans useMemo afin que la même référence d’objet soit renvoyée entre les rendus lorsque rien dans le tableau des dépendances n’a changé.

const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

Choisir soigneusement les dépendances

Incluez dans le tableau des dépendances chaque valeur utilisée à l’intérieur de useMemo. Des dépendances manquantes entraînent des valeurs obsolètes. Incluez les propriétés primitives (chaînes, nombres) et les références stables (fonctions encapsulées dans useCallback).

Fonctions stables avec useCallback

La référence des valeurs de type fonction change à chaque rendu. Encapsulez-les dans useCallback avant de les inclure dans une valeur de contexte useMemo afin d’éviter les nouveaux rendus inutiles.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

const value = useMemo(() => ({ user, logout }), [user, logout]);

Quand la mémorisation est inutile

Si le composant Provider n’effectue jamais de nouveau rendu, par exemple s’il se trouve tout en haut de l’arbre et que son parent ne change jamais, useMemo ajoute une surcharge sans apporter de bénéfice. Mémorisez uniquement lorsque le Provider lui-même effectue de nouveaux rendus.

Les valeurs primitives sont déjà stables

Si la valeur de votre contexte est primitive (chaîne, nombre ou booléen), vous n’avez PAS besoin de useMemo : les primitives sont comparées par valeur et non par référence. `value={isDark}` ne provoquera pas de nouveaux rendus supplémentaires.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Analyser l’effet de la mémorisation

Utilisez le profileur de React DevTools pour vérifier que l’encapsulation de la valeur du contexte dans useMemo réduit réellement les nouveaux rendus. Enregistrez une session avant et après afin de comparer le nombre de validations.

Contextes mémorisés imbriqués

Lorsque plusieurs contextes sont imbriqués, mémorisez chacun indépendamment. Les changements d’un contexte n’affecteront pas la valeur mémorisée d’un autre.

Schéma du composant Provider

Encapsulez le contexte, l’état et la mémorisation dans un composant Provider dédié. Exportez un hook personnalisé pour consommer le contexte. Il s’agit du schéma de référence pour les contextes réutilisables.

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

Vérification rapide

Quelle est la principale raison d’encapsuler un objet représentant la valeur du contexte dans useMemo ?

Récapitulatif

Encapsulez les objets représentant les valeurs du contexte dans useMemo avec les dépendances appropriées. Stabilisez les valeurs de type fonction avec useCallback. Les primitives n’ont pas besoin d’être mémorisées. Encapsulez la configuration du contexte dans un composant Provider doté d’un hook personnalisé.

Suite du cours

Leçon suivante : **Schéma des sélecteurs de contexte** — vous implémenterez un hook de sélection qui ne recrée les consommateurs que lorsqu’une partie précise du contexte change.

Questions Fréquemment Posées

La leçon « Mémoriser les valeurs de contexte avec useMemo » est-elle gratuite ?

Oui — le texte complet de « Mémoriser les valeurs de contexte avec useMemo » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mémoriser les valeurs de contexte avec useMemo » ?

Enveloppez les objets de valeur du contexte dans useMemo afin d’éviter les nouveaux rendus inutiles des consommateurs. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Mémoriser les valeurs de contexte avec useMemo » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Séparer les contextes pour limiter les nouveaux rendus
Mémoriser les valeurs de contexte avec useMemo
Modèle des sélecteurs de contexte
Quand ne pas utiliser Context

← Retour à React Academy