Le crochet React useSyncExternalStore

Le hook useSyncExternalStore dans React est conçu pour gérer les abonnements aux magasins de données externes au sein des composants React. useSyncExternalStore est particulièrement utile lors de l’intégration de bibliothèques ou d’API tierces qui conservent leur propre état en dehors de React.

React a continuellement évolué, introduisant de puissants hooks et fonctionnalités pour améliorer la gestion des états et le comportement des composants. L’un des ajouts les plus récents est le useSyncExternalStore hook, conçu pour gérer de manière transparente les abonnements aux magasins de données externes. Dans cet article, nous approfondissons les détails de ce hook et expliquons sa signature, ses paramètres et son utilisation avec un exemple utile.

useSyncExternalStore

useSyncExternalStore est un hook introduit pour gérer les abonnements aux magasins de données externes de manière à permettre des mises à jour cohérentes et des instantanés de données. Ce hook est particulièrement utile lors de l’intégration de bibliothèques tierces ou d’API qui conservent leur propre état dehors de React. En tirant parti useSyncExternalStorenous pouvons maintenir les composants synchronisés avec les changements d’état externes de manière efficace et fiable.

Le useSyncExternalStore hook a la signature suivante :

const snapshot = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

Décomposons chaque paramètre accepté par le hook :

• subscribe: Fonction qui met en place un abonnement à la boutique externe. Il prend un rappel comme argument, qui doit être appelé à chaque mise à jour du magasin. Idéalement, cette fonction devrait renvoyer une fonction de nettoyage pour supprimer l’abonnement.
• getSnapshot: Fonction qui renvoie l’état actuel du magasin. Il doit être cohérent entre les appels si le magasin n’a pas changé.
• getServerSnapshot (facultatif) : fonction qui renvoie l’état initial du magasin pour le rendu côté serveur. Ceci est important pour garantir la cohérence de l’hydratation entre le serveur et le client.

Le crochet renvoie un snapshot qui est l’état actuel du magasin externe qui peut être utilisé dans la logique de rendu d’un composant.

Pour illustrer l’utilisation de useSyncExternalStore, considérons un simple magasin de tâches. Cet exemple est adapté du Réagir à la documentation.

let nextId = 0;
let todos = [{ id: nextId++, text: "Todo #1" }];
let listeners = [];

export const todosStore = {
  addTodo() {
    todos = [...todos, { id: nextId++, text: "Todo #" + nextId }];
    emitChange();
  },
  subscribe(listener) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot() {
    return todos;
  },
};

function emitChange() {
  for (let listener of listeners) {
    listener();
  }
}

Dans l’exemple de code ci-dessus, todosStore est un magasin simple qui maintient une liste de tâches. Il fournit des méthodes pour ajouter une tâche, s’abonner aux modifications et obtenir l’instantané actuel des tâches. Gardez à l’esprit que ce qui précède est un exemple de boutique tierce que nous pourrions avoir besoin d’intégrer à React. Lorsque vous travaillez dans React lui-même, il est recommandé d’utiliser les solutions de gestion d’état intégrées de React telles que utiliserÉtat ou utiliserRéducteur pour des besoins de gestion d’État plus simples.

Voyons maintenant comment un React Todos Le composant peut utiliser ce magasin avec le useSyncExternalStore crochet. Tout d’abord, nous souscrivons au todosStore et obtenez l’instantané des tâches :

import { useSyncExternalStore } from "react";
import { todosStore } from "./todoStore.js";

export default function Todos() {
  const todos = useSyncExternalStore(
    todosStore.subscribe,
    todosStore.getSnapshot
  );

  
}

Au dessus de useSyncExternalStore hook s’abonne au todosStore et récupère l’instantané actuel des tâches. Le todos La variable sera mise à jour à chaque fois que le magasin change.

Ensuite, nous pouvons nous appuyer sur cela en affichant la liste des tâches et en fournissant un moyen d’ajouter de nouvelles tâches :

import { useSyncExternalStore } from "react";
import { todosStore } from "./todoStore.js";

export default function Todos() {
  const todos = useSyncExternalStore(
    todosStore.subscribe,
    todosStore.getSnapshot
  );

  return (
    <>
      <button onClick={() => todosStore.addTodo()}>Add todo</button>
      <hr />
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

Dans ce Todos composant, useSyncExternalStore sert à s’abonner au todosStore. Le hook restitue le composant à chaque mise à jour du magasin, fournissant une vue cohérente et à jour des tâches. Le Add todo Le bouton permet aux utilisateurs d’ajouter une nouvelle tâche, qui met à jour le magasin et déclenche un nouveau rendu pour afficher la nouvelle tâche.

Choses à garder à l’esprit

Lors de l’utilisation du useSyncExternalStore crochet, veillez à prendre en compte les points suivants :

1. Instantanés immuables: assurez-vous que les instantanés renvoyés par getSnapshot sont immuables. Cela signifie renvoyer un nouvel instantané si les données du magasin changent.
2. Fonction d’abonnement cohérente: Si la subscribe la fonction change entre les rendus, React se réabonnera au magasin. Pour éviter cela, déclarez le subscribe fonction dehors le composant.
3. Mises à jour de transition: Si le magasin est muté lors d’une mise à jour de transition non bloquante, React le traitera comme une mise à jour bloquante pour des raisons de cohérence entre les composants.
4. Rendu du serveur: Utilisez l’option getServerSnapshot paramètre pour fournir un instantané initial pour le rendu côté serveur. Ceci afin que le contenu rendu par le serveur soit sûr de correspondre au contenu rendu par le client pendant l’hydratation.

Conclure

Le useSyncExternalStore hook fournit un moyen puissant et standardisé d’intégrer des magasins externes aux composants React. Il simplifie le processus d’abonnement à des sources de données externes et garantit que les composants restent synchronisés avec l’état externe. Que vous travailliez avec des bibliothèques tierces ou que vous construisiez des solutions complexes de gestion d’état, useSyncExternalStore garantit que vos composants restent synchronisés avec les modifications de données externes.

Pour plus de détails sur le hook useSyncExternalStore, assurez-vous de consulter le documentation officielle de React.