React useSyncExternalStore : Maîtriser l'intégration d'états externes

Le hook useSyncExternalStore de React, introduit dans React 18, offre un moyen puissant et efficace d'intégrer des sources de données externes et des bibliothèques de gestion d'état dans vos composants React. Ce hook permet aux composants de s'abonner aux changements dans des stores externes, garantissant que l'interface utilisateur reflète toujours les données les plus récentes tout en optimisant les performances. Ce guide fournit une vue d'ensemble complète de useSyncExternalStore, couvrant ses concepts fondamentaux, ses modèles d'utilisation et ses meilleures pratiques.

Comprendre la nécessité de useSyncExternalStore

Dans de nombreuses applications React, vous rencontrerez des scénarios où l'état doit être géré en dehors de l'arborescence des composants. C'est souvent le cas lorsque vous traitez avec :

• Bibliothèques tierces : Intégration avec des bibliothèques qui gèrent leur propre état (par exemple, une connexion à une base de données, une API de navigateur ou un moteur physique).
• État partagé entre les composants : Gestion d'un état qui doit être partagé entre des composants qui ne sont pas directement liés (par exemple, le statut d'authentification de l'utilisateur, les paramètres de l'application ou un bus d'événements global).
• Sources de données externes : Récupération et affichage de données à partir d'API ou de bases de données externes.

Les solutions traditionnelles de gestion d'état comme useState et useReducer sont bien adaptées à la gestion de l'état local des composants. Cependant, elles ne sont pas conçues pour gérer efficacement l'état externe. Leur utilisation directe avec des sources de données externes peut entraîner des problèmes de performance, des mises à jour incohérentes et un code complexe.

useSyncExternalStore répond à ces défis en fournissant un moyen standardisé et optimisé de s'abonner aux changements dans les stores externes. Il garantit que les composants ne sont re-rendus que lorsque les données pertinentes changent, minimisant ainsi les mises à jour inutiles et améliorant les performances globales.

Concepts fondamentaux de useSyncExternalStore

useSyncExternalStore prend trois arguments :

1. subscribe : Une fonction qui prend un callback en argument et s'abonne au store externe. Le callback sera appelé chaque fois que les données du store changent.
2. getSnapshot : Une fonction qui renvoie un instantané (snapshot) des données du store externe. Cette fonction doit renvoyer une valeur stable que React peut utiliser pour déterminer si les données ont changé. Elle doit être pure et rapide.
3. getServerSnapshot (optionnel) : Une fonction qui renvoie la valeur initiale du store lors du rendu côté serveur. Ceci est crucial pour garantir que le HTML initial correspond au rendu côté client. Il est utilisé UNIQUEMENT dans les environnements de rendu côté serveur. S'il est omis dans un environnement côté client, il utilise getSnapshot à la place. Il est important que cette valeur ne change jamais après son rendu initial côté serveur.

Voici une description de chaque argument :

1. subscribe

La fonction subscribe est responsable d'établir une connexion entre le composant React et le store externe. Elle reçoit une fonction de rappel (callback), qu'elle doit appeler chaque fois que les données du store changent. Ce callback est généralement utilisé pour déclencher un nouveau rendu du composant.

Exemple :

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

Dans cet exemple, store.addListener ajoute le callback à la liste des auditeurs du store. La fonction renvoie une fonction de nettoyage qui supprime l'auditeur lorsque le composant est démonté, évitant ainsi les fuites de mémoire.

2. getSnapshot

La fonction getSnapshot est responsable de récupérer un instantané des données du store externe. Cet instantané doit être une valeur stable que React peut utiliser pour déterminer si les données ont changé. React utilise Object.is pour comparer l'instantané actuel avec le précédent. Par conséquent, elle doit être rapide et il est fortement recommandé qu'elle renvoie une valeur primitive (chaîne de caractères, nombre, booléen, null ou undefined).

Exemple :

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

Dans cet exemple, store.getData renvoie les données actuelles du store. React comparera cette valeur avec la valeur précédente pour déterminer si le composant doit être re-rendu.

3. getServerSnapshot (Optionnel)

La fonction getServerSnapshot n'est pertinente que lorsque le rendu côté serveur (SSR) est utilisé. Cette fonction est appelée lors du rendu initial du serveur, et son résultat est utilisé comme valeur initiale du store avant que l'hydratation ne se produise côté client. Renvoyer des valeurs cohérentes est essentiel pour un SSR réussi.

Exemple :

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

Dans cet exemple, `store.getInitialDataForServer` renvoie les données initiales appropriées pour le rendu côté serveur.

Exemple d'utilisation de base

Considérons un exemple simple où nous avons un store externe qui gère un compteur. Nous pouvons utiliser useSyncExternalStore pour afficher la valeur du compteur dans un composant React :

            // Store externe
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Composant React
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Dans cet exemple, createStore crée un store externe simple qui gère la valeur d'un compteur. Le composant Counter utilise useSyncExternalStore pour s'abonner aux changements dans le store et afficher le compte actuel. Lorsque le bouton d'incrémentation est cliqué, la fonction setState met à jour la valeur du store, ce qui déclenche un nouveau rendu du composant.

Intégration avec les bibliothèques de gestion d'état

useSyncExternalStore est particulièrement utile pour l'intégration avec des bibliothèques de gestion d'état comme Zustand, Jotai et Recoil. Ces bibliothèques fournissent leurs propres mécanismes de gestion d'état, et useSyncExternalStore vous permet de les intégrer de manière transparente dans vos composants React.

Voici un exemple d'intégration avec Zustand :

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Store Zustand
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// Composant React
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand simplifie la création du store. Ses implémentations internes de subscribe et getSnapshot sont utilisées implicitement lorsque vous vous abonnez à un état particulier.

Voici un exemple d'intégration avec Jotai :

            import { atom, useAtom } from 'jotai'

// Atome Jotai
const countAtom = atom(0)

// Composant React
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai utilise des atomes pour gérer l'état. useAtom gère en interne l'abonnement et la prise d'instantanés.

Optimisation des performances

useSyncExternalStore fournit plusieurs mécanismes pour optimiser les performances :

• Mises à jour sélectives : React ne re-rend le composant que lorsque la valeur renvoyée par getSnapshot change. Cela garantit que les re-rendus inutiles sont évités.
• Mises à jour par lots : React regroupe les mises à jour de plusieurs stores externes en un seul re-rendu. Cela réduit le nombre de re-rendus et améliore les performances globales.
• Éviter les closures périmées : useSyncExternalStore garantit que le composant a toujours accès aux données les plus récentes du store externe, même en cas de mises à jour asynchrones.

Pour optimiser davantage les performances, considérez les meilleures pratiques suivantes :

• Minimisez la quantité de données renvoyées par getSnapshot : Ne renvoyez que les données réellement nécessaires au composant. Cela réduit la quantité de données à comparer et améliore l'efficacité du processus de mise à jour.
• Utilisez des techniques de mémoïsation : Mémoïsez les résultats de calculs coûteux ou de transformations de données. Cela peut éviter des recalculs inutiles et améliorer les performances.
• Évitez les abonnements inutiles : Ne vous abonnez au store externe que lorsque le composant est réellement visible. Cela peut réduire le nombre d'abonnements actifs et améliorer les performances globales.
• Assurez-vous que getSnapshot renvoie un nouvel objet *stable* uniquement si les données ont changé : Évitez de créer de nouveaux objets/tableaux/fonctions si les données sous-jacentes n'ont pas réellement changé. Renvoyez le même objet par référence si possible.

Rendu côté serveur (SSR) avec useSyncExternalStore

Lors de l'utilisation de useSyncExternalStore avec le rendu côté serveur (SSR), il est crucial de fournir une fonction getServerSnapshot. Cette fonction garantit que le HTML initial rendu sur le serveur correspond au rendu côté client, évitant les erreurs d'hydratation et améliorant l'expérience utilisateur.

Voici un exemple d'utilisation de getServerSnapshot :

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Important pour le SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Composant React
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Dans cet exemple, getServerSnapshot renvoie la valeur initiale du compteur. Cela garantit que le HTML initial rendu sur le serveur correspond au rendu côté client. getServerSnapshot doit renvoyer une valeur stable et prévisible. Elle doit également effectuer la même logique que la fonction getSnapshot sur le serveur. Évitez d'accéder aux API spécifiques au navigateur ou aux variables globales dans getServerSnapshot.

Modèles d'utilisation avancés

useSyncExternalStore peut être utilisé dans une variété de scénarios avancés, notamment :

• Intégration avec les API du navigateur : S'abonner aux changements dans les API du navigateur comme localStorage ou navigator.onLine.
• Création de hooks personnalisés : Encapsuler la logique d'abonnement à un store externe dans un hook personnalisé.
• Utilisation avec l'API Context : Combiner useSyncExternalStore avec l'API Context de React pour fournir un état partagé à une arborescence de composants.

Voyons un exemple de création d'un hook personnalisé pour s'abonner à localStorage :

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Déclencher manuellement l'événement de stockage pour les mises à jour sur la même page
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

Dans cet exemple, useLocalStorage est un hook personnalisé qui s'abonne aux changements dans localStorage. Il utilise useSyncExternalStore pour gérer l'abonnement et récupérer la valeur actuelle de localStorage. Il distribue également correctement un événement de stockage pour garantir que les mises à jour sur la même page sont reflétées (car les événements `storage` ne sont déclenchés que dans d'autres onglets). Le serverSnapshot garantit que les valeurs initiales sont correctement fournies dans les environnements serveur.

Meilleures pratiques et pièges courants

Voici quelques meilleures pratiques et pièges courants à éviter lors de l'utilisation de useSyncExternalStore :

• Évitez de modifier directement le store externe : Utilisez toujours l'API du store pour mettre à jour les données. La modification directe du store peut entraîner des mises à jour incohérentes et un comportement inattendu.
• Assurez-vous que getSnapshot est pure et rapide : getSnapshot ne doit avoir aucun effet de bord et doit renvoyer rapidement une valeur stable. Les calculs coûteux ou les transformations de données doivent être mémoïsés.
• Fournissez une fonction getServerSnapshot lors de l'utilisation du SSR : C'est crucial pour garantir que le HTML initial rendu sur le serveur correspond au rendu côté client.
• Gérez les erreurs avec élégance : Utilisez des blocs try-catch pour gérer les erreurs potentielles lors de l'accès au store externe.
• Nettoyez les abonnements : Désabonnez-vous toujours du store externe lorsque le composant est démonté pour éviter les fuites de mémoire. La fonction subscribe doit renvoyer une fonction de nettoyage qui supprime l'auditeur.
• Comprenez les implications sur les performances : Bien que useSyncExternalStore soit optimisé pour les performances, il est important de comprendre l'impact potentiel de l'abonnement à des stores externes. Minimisez la quantité de données renvoyées par getSnapshot et évitez les abonnements inutiles.
• Testez minutieusement : Assurez-vous que l'intégration avec le store fonctionne correctement dans différents scénarios, en particulier dans le rendu côté serveur et le mode concurrent.

Conclusion

useSyncExternalStore est un hook puissant et efficace pour intégrer des sources de données externes et des bibliothèques de gestion d'état dans vos composants React. En comprenant ses concepts fondamentaux, ses modèles d'utilisation et ses meilleures pratiques, vous pouvez gérer efficacement l'état partagé dans vos applications React et optimiser les performances. Que vous intégriez des bibliothèques tierces, gériez un état partagé entre composants ou récupériez des données d'API externes, useSyncExternalStore fournit une solution standardisée et fiable. Adoptez-le pour créer des applications React plus robustes, maintenables et performantes pour un public mondial.

Ressources supplémentaires

• Documentation React sur useSyncExternalStore
• Pull Request de React 18 introduisant useSyncExternalStore
• Bibliothèque de gestion d'état Zustand
• Bibliothèque de gestion d'état Jotai