PricingLoginStart free
React Academy · Leçon

Séparer les contextes pour limiter les nouveaux rendus

Séparez les valeurs qui changent fréquemment des valeurs stables dans différents contextes.

Leçon 1 sur 413 étapes

Séparer les contextes pour limiter les nouveaux rendus est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 à répartir les Contextes React entre plusieurs fournisseurs afin de réduire les nouveaux rendus lorsque seule une partie de la valeur du contexte change.

Le problème des nouveaux rendus avec Context

Chaque composant qui appelle useContext(MyCtx) effectue un nouveau rendu lorsqu’une partie ANY de la valeur du contexte change, même si la partie qu’il utilise n’a pas changé. Un contexte unique et volumineux peut provoquer de nombreux nouveaux rendus inutiles.

Répartir selon la fréquence des mises à jour

Séparez les valeurs qui changent fréquemment de celles qui changent rarement. Placez chaque groupe dans son propre contexte. Les consommateurs s’abonnent uniquement au contexte dont ils ont besoin.
const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Séparer les contextes de données et d’envoi d’actions

Un schéma courant consiste à séparer un contexte pour les données d’état, qui provoque un nouveau rendu à chaque changement, et un autre pour les fonctions d’envoi d’actions et de définition, qui restent stables et ne provoquent jamais de nouveau rendu chez les consommateurs. Les consommateurs qui utilisent uniquement l’envoi d’actions ne sont jamais recréés lors des changements de données.
const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Mémoriser le contexte d’envoi d’actions

Les fonctions de définition provenant de useState sont stables, c’est-à-dire qu’elles conservent la même référence à chaque rendu ; la valeur du contexte d’envoi d’actions ne change donc pas. En revanche, si vous calculez un objet d’actions, encapsulez-le dans useMemo.
const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Fournisseurs imbriqués

Imbriquez plusieurs fournisseurs dans l’arbre des composants. Les consommateurs importent et utilisent uniquement le contexte précis dont ils ont besoin, ce qui limite les abonnements.
function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Analyser les performances avant de séparer les contextes

Analysez toujours les performances avec React DevTools avant de séparer les contextes. Les nouveaux rendus inutiles ne posent problème que s’ils sont coûteux. Ne compliquez pas inutilement des contextes dont le nouveau rendu est rapide.

Compromis de la séparation des contextes

Davantage de contextes signifie davantage de fournisseurs dans l’arbre des composants. Cela augmente la charge cognitive. Ne séparez les contextes que si l’analyse des performances révèle un problème, et non par anticipation.

Combiner avec React.memo

Même avec un contexte unique, envelopper les composants enfants coûteux dans React.memo signifie qu’ils ne sont recréés que lorsque leurs propriétés changent, et non lorsque le contexte change. Cette solution peut être plus simple que la séparation des contextes.
const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer et Context

Associez useReducer à Context pour gérer un état complexe. Stockez l’état dans un contexte et la fonction d’envoi d’actions dans un autre. L’envoi d’actions reste stable ; l’état est mis à jour à chaque action.

Vérification rapide

Pourquoi séparer l’état et l’envoi d’actions dans des contextes distincts améliore-t-il les performances ?
Réponds-y dans la leçon interactive

Récapitulatif

Séparez les contextes selon la fréquence des mises à jour : l’état qui change fréquemment dans un contexte, et les fonctions d’envoi d’actions et de définition stables dans un autre. Analysez d’abord les performances, ne séparez les contextes que lorsque cela est utile et envisagez React.memo comme solution plus simple.

Suite du cours

Leçon suivante : **Mémoriser les valeurs de contexte avec useMemo** — vous encapsulerez les objets représentant les valeurs du contexte dans useMemo afin que les consommateurs ne soient pas recréés lorsque les données n’ont pas changé.
Gratuit pour commencer

Apprends React avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
88
Leçons
324
Commencer gratuitementVoir le cours complet

Questions Fréquemment Posées

La leçon « Séparer les contextes pour limiter les nouveaux rendus » est-elle gratuite ?

Oui — le texte complet de « Séparer les contextes pour limiter les nouveaux rendus » 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 « Séparer les contextes pour limiter les nouveaux rendus » ?

Séparez les valeurs qui changent fréquemment des valeurs stables dans différents contextes. 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 1 sur 4.

Combien de temps prend la leçon « Séparer les contextes pour limiter les nouveaux rendus » ?

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

  1. Séparer les contextes pour limiter les nouveaux rendus
  2. Mémoriser les valeurs de contexte avec useMemo
  3. Modèle des sélecteurs de contexte
  4. Quand ne pas utiliser Context
← Retour à React Academy