Abonnement au contexte React : Contrôle précis des mises à jour pour les applications globales

Dans le paysage dynamique du développement web moderne, une gestion efficace de l'état est primordiale. À mesure que les applications gagnent en complexité, en particulier celles avec une base d'utilisateurs mondiale, s'assurer que les composants ne se rendent que lorsque cela est nécessaire devient un souci de performance essentiel. L'API Context de React offre un moyen puissant de partager l'état dans votre arborescence de composants sans "prop drilling". Cependant, un piège courant est de déclencher des rendus inutiles dans les composants qui consomment le contexte, même lorsqu'une petite partie de l'état partagé a changé. Cet article explore l'art du contrôle précis des mises à jour dans les abonnements au contexte React, vous permettant de créer des applications globales plus performantes et évolutives.

Comprendre le contexte React et son comportement de rendu

Le contexte React fournit un mécanisme pour transmettre des données à travers l'arborescence des composants sans avoir à transmettre manuellement les props à chaque niveau. Il est composé de trois parties principales :

• Création de contexte : Utilisation de React.createContext() pour créer un objet Context.
• Fournisseur : Un composant qui fournit la valeur du contexte à ses descendants.
• Consommateur : Un composant qui s'abonne aux modifications du contexte. Historiquement, cela se faisait avec le composant Context.Consumer, mais plus communément aujourd'hui, cela se fait à l'aide du hook useContext.

Le principal défi découle de la façon dont l'API Context de React gère les mises à jour. Lorsque la valeur fournie par un Context Provider change, tous les composants qui consomment ce contexte (directement ou indirectement) seront rendus par défaut. Ce comportement peut entraîner des goulots d'étranglement importants en matière de performances, en particulier dans les grandes applications ou lorsque la valeur du contexte est complexe et fréquemment mise à jour. Imaginez un fournisseur de thème global où seule la couleur principale change. Sans une optimisation appropriée, chaque composant écoutant le contexte du thème serait rendu à nouveau, même ceux qui n'utilisent que la famille de polices.

Le problème : Rendu large avec `useContext`

Illustrons le comportement par défaut avec un scénario courant. Supposons que nous ayons un contexte de profil utilisateur qui contient diverses informations sur l'utilisateur : nom, e-mail, préférences et nombre de notifications. De nombreux composants peuvent avoir besoin d'accéder à ces données.

            // UserContext.js
import React, { createContext, useState, useContext } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  const updateNotificationCount = (count) => {
    setUser(prevUser => ({ ...prevUser, notificationCount: count }));
  };

  return (
    
      {children}
    
  );
};

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

            

              
                Copy
              
            
          

Considérons maintenant deux composants consommant ce contexte :

            // UserNameDisplay.js
import React from 'react';
import { useUser } from './UserContext';

const UserNameDisplay = () => {
  const { user } = useUser();
  console.log('UserNameDisplay rendered');
  return <b>User Name: {user.name}</b>;
};

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUser } from './UserContext';

const UserNotificationCount = () => {
  const { user, updateNotificationCount } = useUser();
  console.log('UserNotificationCount rendered');
  return (
    <div>
      <b>Notifications: {user.notificationCount}</b>
      <button onClick={() => updateNotificationCount(user.notificationCount + 1)}>Add Notification</button>
    </div>
  );
};

export default UserNotificationCount;

            

              
                Copy
              
            
          

Dans votre composant App principal :

            // App.js
import React from 'react';
import { UserProvider } from './UserContext';
import UserNameDisplay from './UserNameDisplay';
import UserNotificationCount from './UserNotificationCount';

function App() {
  return (
    <UserProvider>
      <h1>Global User Dashboard</h1>
      <UserNameDisplay />
      <UserNotificationCount />
      {/* Other components that might consume UserContext or not */}
    </UserProvider>
  );
}

export default App;

            

              
                Copy
              
            
          

Lorsque vous cliquez sur le bouton "Add Notification" dans UserNotificationCount, UserNotificationCount et UserNameDisplay seront rendus à nouveau, même si UserNameDisplay ne se soucie que du nom de l'utilisateur et ne s'intéresse pas au nombre de notifications. En effet, l'objet user entier dans la valeur du contexte a été mis à jour, ce qui a déclenché un nouveau rendu pour tous les consommateurs de UserContext.

Stratégies pour les mises à jour précises

La clé pour obtenir des mises à jour précises est de s'assurer que les composants ne s'abonnent qu'aux éléments spécifiques de l'état dont ils ont besoin. Voici plusieurs stratégies efficaces :

1. Fractionnement du contexte

L'approche la plus simple et souvent la plus efficace consiste à diviser votre contexte en contextes plus petits et plus ciblés. Si différentes parties de votre application ont besoin de différentes parties de l'état global, créez des contextes distincts pour chacune d'elles.

Refactorisons l'exemple précédent :

            // UserProfileContext.js
import React, { createContext, useContext } from 'react';

const UserProfileContext = createContext();

export const UserProfileProvider = ({ children, profileData }) => {
  return (
    <UserProfileContext.Provider value={profileData}>
      {children}
    </UserProfileContext.Provider>
  );
};

export const useUserProfile = () => useContext(UserProfileContext);

// UserNotificationsContext.js
import React, { createContext, useContext, useState } from 'react';

const UserNotificationsContext = createContext();

export const UserNotificationsProvider = ({ children }) => {
  const [notificationCount, setNotificationCount] = useState(0);

  const addNotification = () => {
    setNotificationCount(prev => prev + 1);
  };

  return (
    <UserNotificationsContext.Provider value={{ notificationCount, addNotification }}>
      {children}
    </UserNotificationsContext.Provider>
  );
};

export const useUserNotifications = () => useContext(UserNotificationsContext);

            

              
                Copy
              
            
          

Et comment vous utiliseriez ces éléments :

            // App.js
import React from 'react';
import { UserProfileProvider } from './UserProfileContext';
import { UserNotificationsProvider } from './UserNotificationsContext';
import UserNameDisplay from './UserNameDisplay'; // Still uses useUserProfile
import UserNotificationCount from './UserNotificationCount'; // Now uses useUserNotifications

function App() {
  const initialProfileData = {
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
  };

  return (
    <UserProfileProvider profileData={initialProfileData}>
      <UserNotificationsProvider>
        <h1>Global User Dashboard</h1>
        <UserNameDisplay />
        <UserNotificationCount />
      </UserNotificationsProvider>
    </UserProfileProvider>
  );
}

export default App;

// UserNameDisplay.js (updated to use UserProfileContext)
import React from 'react';
import { useUserProfile } from './UserProfileContext';

const UserNameDisplay = () => {
  const userProfile = useUserProfile();
  console.log('UserNameDisplay rendered');
  return <b>User Name: {userProfile.name}</b>;
};

export default UserNameDisplay;

// UserNotificationCount.js (updated to use UserNotificationsContext)
import React from 'react';
import { useUserNotifications } from './UserNotificationsContext';

const UserNotificationCount = () => {
  const { notificationCount, addNotification } = useUserNotifications();
  console.log('UserNotificationCount rendered');
  return (
    <div>
      <b>Notifications: {notificationCount}</b>
      <button onClick={addNotification}>Add Notification</button>
    </div>
  );
};

export default UserNotificationCount;

            

              
                Copy
              
            
          

Avec cette division, lorsque le nombre de notifications change, seul UserNotificationCount sera rendu à nouveau. UserNameDisplay, qui s'abonne à UserProfileContext, ne sera pas rendu à nouveau car la valeur de son contexte n'a pas changé. Il s'agit d'une amélioration significative des performances.

Considérations globales : Lors de la division des contextes pour une application globale, tenez compte de la séparation logique des préoccupations. Par exemple, un panier d'achat global peut avoir des contextes distincts pour les articles, le prix total et l'état du paiement. Cela reflète la façon dont différents départements d'une entreprise mondiale gèrent leurs données de manière indépendante.

2. Mémorisation avec `React.memo` et `useCallback`/`useMemo`

Même lorsque vous avez un seul contexte, vous pouvez optimiser les composants qui le consomment en les mémorisant. React.memo est un composant d'ordre supérieur qui mémorise votre composant. Il effectue une comparaison superficielle des props précédentes et nouvelles du composant. S'ils sont identiques, React ignore le rendu du composant.

Cependant, useContext ne fonctionne pas sur les props au sens traditionnel ; il déclenche des rendus en fonction des changements de valeur du contexte. Lorsque la valeur du contexte change, le composant qui le consomme est effectivement rendu à nouveau. Pour tirer parti de React.memo efficacement avec le contexte, vous devez vous assurer que le composant reçoit des éléments de données spécifiques du contexte en tant que props ou que la valeur du contexte elle-même est stable.

Un modèle plus avancé consiste à créer des fonctions de sélection dans votre fournisseur de contexte. Ces sélecteurs permettent aux composants consommateurs de s'abonner à des parties spécifiques de l'état, et le fournisseur peut être optimisé pour n'informer les abonnés que lorsque leur partie spécifique change. Cela est souvent implémenté par des hooks personnalisés qui tirent parti de useContext et `useMemo`.

Revenons à l'exemple de contexte unique, mais visons des mises à jour plus granulaires sans diviser le contexte :

            // UserContextImproved.js
import React, { createContext, useContext, useState, useMemo, useCallback } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  // Memoize the specific parts of the state if they are passed down as props
  // or if you create custom hooks that consume specific parts.

  const updateNotificationCount = useCallback((count) => {
    setUser(prevUser => {
      // Create a new user object only if notificationCount changes
      if (prevUser.notificationCount === count) return prevUser;
      return {
        ...prevUser,
        notificationCount: count,
      };
    });
  }, []);

  // Provide specific selectors/values that are stable or only update when needed
  const contextValue = useMemo(() => ({
    user: {
      name: user.name,
      email: user.email,
      preferences: user.preferences
      // Exclude notificationCount from this memoized value if possible
    },
    notificationCount: user.notificationCount,
    updateNotificationCount
  }), [user.name, user.email, user.preferences, user.notificationCount, updateNotificationCount]);

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
};

// Custom hooks for specific slices of the context
export const useUserName = () => {
  const { user } = useContext(UserContext);
  // `React.memo` on consuming component will work if `user.name` is stable
  return user.name;
};

export const useUserNotifications = () => {
  const { notificationCount, updateNotificationCount } = useContext(UserContext);
  // `React.memo` on consuming component will work if `notificationCount` and `updateNotificationCount` are stable
  return { notificationCount, updateNotificationCount };
};

            

              
                Copy
              
            
          

Maintenant, refactorisez les composants consommateurs pour utiliser ces hooks granulaires :

            // UserNameDisplay.js
import React from 'react';
import { useUserName } from './UserContextImproved';

const UserNameDisplay = React.memo(() => {
  const userName = useUserName();
  console.log('UserNameDisplay rendered');
  return <b>User Name: {userName}</b>;
});

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUserNotifications } from './UserContextImproved';

const UserNotificationCount = React.memo(() => {
  const { notificationCount, updateNotificationCount } = useUserNotifications();
  console.log('UserNotificationCount rendered');
  return (
    <div>
      <b>Notifications: {notificationCount}</b>
      <button onClick={() => updateNotificationCount(notificationCount + 1)}>Add Notification</button>
    </div>
  );
});

export default UserNotificationCount;

            

              
                Copy
              
            
          

Dans cette version améliorée :

• `useCallback` est utilisé pour les fonctions telles que updateNotificationCount afin de garantir qu'elles ont une identité stable lors des nouveaux rendus, ce qui empêche les nouveaux rendus inutiles dans les composants enfants qui les reçoivent en tant que props.
• `useMemo` est utilisé dans le fournisseur pour créer une valeur de contexte mémorisée. En n'incluant que les éléments d'état (ou les valeurs dérivées) nécessaires dans cet objet mémorisé, nous pouvons potentiellement réduire le nombre de fois où les consommateurs reçoivent une nouvelle référence de valeur de contexte. Il est essentiel de créer des hooks personnalisés (useUserName, useUserNotifications) qui extraient des parties spécifiques du contexte.
• `React.memo` est appliqué aux composants consommateurs. Étant donné que ces composants ne consomment désormais qu'une partie spécifique de l'état (par exemple, userName ou notificationCount), et que ces valeurs sont mémorisées ou ne sont mises à jour que lorsque leurs données spécifiques changent, React.memo peut empêcher efficacement les nouveaux rendus lorsque l'état non lié dans le contexte change.

Lorsque vous cliquez sur le bouton, user.notificationCount change. Cependant, l'objet `contextValue` transmis au fournisseur peut être recréé. L'essentiel est que le hook useUserName reçoit `user.name`, qui n'a pas changé. Si le composant UserNameDisplay est enveloppé dans React.memo et que ses props (dans ce cas, la valeur renvoyée par useUserName) n'ont pas changé, il ne sera pas rendu à nouveau. De même, UserNotificationCount est rendu à nouveau car sa partie spécifique de l'état (notificationCount) a changé.

Considérations globales : Cette technique est particulièrement utile pour les configurations globales telles que les thèmes d'interface utilisateur ou les paramètres d'internationalisation (i18n). Si un utilisateur modifie sa langue préférée, seuls les composants qui affichent activement du texte localisé doivent être rendus à nouveau, et non tous les composants qui pourraient éventuellement avoir besoin d'accéder aux données de localisation.

3. Sélecteurs de contexte personnalisés (Avancé)

Pour les structures d'état extrêmement complexes ou lorsque vous avez besoin d'un contrôle encore plus sophistiqué, vous pouvez implémenter des sélecteurs de contexte personnalisés. Ce modèle implique la création d'un composant d'ordre supérieur ou d'un hook personnalisé qui prend une fonction de sélection comme argument. Le hook s'abonne ensuite au contexte, mais ne rend à nouveau le composant consommateur que lorsque la valeur renvoyée par la fonction de sélection change.

Ceci est similaire à ce que les bibliothèques comme Zustand ou Redux réalisent avec leurs sélecteurs. Vous pouvez imiter ce comportement :

            // UserContextSelectors.js
import React, { createContext, useContext, useState, useMemo, useCallback, useRef, useEffect } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  const updateNotificationCount = useCallback((count) => {
    setUser(prevUser => {
      if (prevUser.notificationCount === count) return prevUser;
      return {
        ...prevUser,
        notificationCount: count,
      };
    });
  }, []);

  // The entire user object is the value for simplicity here,
  // but the custom hook handles selection.
  const contextValue = useMemo(() => ({ user, updateNotificationCount }), [user, updateNotificationCount]);

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
};

// Custom hook with selection
export const useUserContext = (selector) => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUserContext must be used within a UserProvider');
  }

  const { user, updateNotificationCount } = context;

  // Memoize the selected value to prevent unnecessary re-renders
  const selectedValue = useMemo(() => selector(user), [user, selector]);

  // Use a ref to track the previous selected value
  const previousSelectedValue = useRef();

  useEffect(() => {
    previousSelectedValue.current = selectedValue;
  }, [selectedValue]);

  // Only re-render if the selected value has changed.
  // React.memo on the consuming component combined with this
  // ensures efficient updates.
  const isSelectedValueDifferent = selectedValue !== previousSelectedValue.current;

  return {
    selectedValue,
    updateNotificationCount,
    // This is a simplified mechanism. A robust solution would involve
    // a more complex subscription manager within the provider.
    // For demonstration, we rely on the consuming component's memoization.
  };
};

            

              
                Copy
              
            
          

Les composants consommateurs ressembleraient à ceci :

            // UserNameDisplay.js
import React from 'react';
import { useUserContext } from './UserContextSelectors';

const UserNameDisplay = React.memo(() => {
  // Selector function for user name
  const userNameSelector = (user) => user.name;
  const { selectedValue: userName } = useUserContext(userNameSelector);

  console.log('UserNameDisplay rendered');
  return <b>User Name: {userName}</b>;
});

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUserContext } from './UserContextSelectors';

const UserNotificationCount = React.memo(() => {
  // Selector function for notification count and the update function
  const notificationSelector = (user) => ({ count: user.notificationCount });
  const { selectedValue, updateNotificationCount } = useUserContext(notificationSelector);

  console.log('UserNotificationCount rendered');
  return (
    <div>
      <b>Notifications: {selectedValue.count}</b>
      <button onClick={() => updateNotificationCount(selectedValue.count + 1)}>Add Notification</button>
    </div>
  );
});

export default UserNotificationCount;

            

              
                Copy
              
            
          

Dans ce modèle :

• Le hook useUserContext prend une fonction selector.
• Il utilise useMemo pour calculer la valeur sélectionnée en fonction du contexte. Cette valeur sélectionnée est mémorisée.
• La combinaison useEffect et `useRef` est un moyen simplifié de s'assurer que le composant n'est rendu à nouveau que si le selectedValue change réellement. Une implémentation vraiment robuste impliquerait un système de gestion des abonnements plus sophistiqué au sein du fournisseur, où les consommateurs enregistrent leurs sélecteurs et le fournisseur les avertit de manière sélective.
• Les composants consommateurs, enveloppés dans React.memo, ne seront rendus à nouveau que si la valeur renvoyée par leur fonction de sélection spécifique change.

Considérations globales : Cette approche offre une flexibilité maximale. Pour une plateforme de commerce électronique mondiale, vous pouvez avoir un seul contexte pour toutes les données relatives au panier, mais utiliser des sélecteurs pour mettre à jour uniquement le nombre d'articles du panier affiché, le sous-total ou les frais d'expédition indépendamment.

Quand utiliser quelle stratégie

• Fractionnement du contexte : C'est généralement la méthode préférée pour la plupart des scénarios. Il conduit à un code plus propre, à une meilleure séparation des préoccupations et est plus facile à comprendre. Utilisez-le lorsque différentes parties de votre application dépendent clairement d'ensembles distincts de données globales.
• Mémorisation avec `React.memo`, `useCallback`, `useMemo` (avec des hooks personnalisés) : Il s'agit d'une bonne stratégie intermédiaire. Cela aide lorsque la division du contexte semble excessive ou lorsqu'un seul contexte contient logiquement des données étroitement liées. Cela nécessite plus d'efforts manuels, mais offre un contrôle granulaire dans un seul contexte.
• Sélecteurs de contexte personnalisés : Réservez ceci aux applications très complexes où les méthodes ci-dessus deviennent difficiles à gérer, ou lorsque vous souhaitez émuler les modèles d'abonnement sophistiqués des bibliothèques de gestion d'état dédiées. Il offre le contrôle le plus précis, mais s'accompagne d'une complexité accrue.

Meilleures pratiques pour la gestion globale du contexte

Lors de la création d'applications globales avec React Context, tenez compte de ces meilleures pratiques :

• Conserver des valeurs de contexte simples : Évitez les objets de contexte volumineux et monolithiques. Décomposez-les logiquement.
• Préférer les hooks personnalisés : Abstraire la consommation de contexte dans des hooks personnalisés (par exemple, useUserProfile, useTheme) rend vos composants plus propres et favorise la réutilisabilité.
• Utiliser `React.memo` judicieusement : N'enveloppez pas chaque composant dans `React.memo`. Analysez votre application et appliquez-le uniquement là où les nouveaux rendus sont un problème de performance.
• Stabilité des fonctions : Utilisez toujours `useCallback` pour les fonctions transmises via le contexte ou les props afin d'éviter les nouveaux rendus involontaires.
• Mémoriser les données dérivées : Utilisez `useMemo` pour toutes les valeurs calculées dérivées du contexte qui sont utilisées par plusieurs composants.
• Envisager des bibliothèques tierces : Pour les besoins très complexes de gestion de l'état global, des bibliothèques comme Zustand, Jotai ou Recoil offrent des solutions intégrées pour les abonnements et les sélecteurs précis, souvent avec moins de code réutilisable.
• Documenter votre contexte : Documentez clairement ce que chaque contexte fournit et comment les consommateurs doivent interagir avec lui. Ceci est crucial pour les grandes équipes distribuées travaillant sur des projets mondiaux.

Conclusion

Maîtriser le contrôle précis des mises à jour dans React Context est essentiel pour créer des applications globales performantes, évolutives et maintenables. En divisant stratégiquement les contextes, en tirant parti des techniques de mémorisation et en comprenant quand implémenter des modèles de sélecteur personnalisés, vous pouvez réduire considérablement les nouveaux rendus inutiles et vous assurer que votre application reste réactive, quelle que soit sa taille ou la complexité de son état.

Au fur et à mesure que vous créez des applications qui servent des utilisateurs dans différentes régions, fuseaux horaires et conditions de réseau, ces optimisations deviennent non seulement les meilleures pratiques, mais aussi des nécessités. Adoptez ces stratégies pour offrir une expérience utilisateur supérieure à votre public mondial.