Construire un magasin personnalisé avec useSyncExternalStore

Une source d’état personnalisée a besoin de trois éléments : un état, une méthode d’abonnement pour enregistrer les écouteurs et une méthode getSnapshot pour lire l’état actuel. C’est l’intégralité du contrat attendu par useSyncExternalStore.

En gardant la source d’état aussi petite, vous la rendez indépendante de tout cadre logiciel : elle peut être utilisée aussi bien dans React qu’en dehors de React.

Une fabrique createStore reçoit une valeur initiale et renvoie un objet contenant getSnapshot, la fonction d’abonnement et une fonction de mise à jour. En interne, elle conserve l’état actuel et un ensemble de fonctions de rappel d’écouteurs.

Ce modèle de fabrique vous permet de créer plusieurs sources d’état indépendantes avec une seule fonction réutilisable.

Lorsque la fonction de mise à jour modifie l’état, elle définit la nouvelle valeur, puis appelle chaque écouteur enregistré. Ces écouteurs sont les fonctions de rappel que React a fournies par l’intermédiaire de la fonction d’abonnement.

Les appeler indique à React que la source d’état a changé, ce qui l’incite à relire getSnapshot et à effectuer un nouveau rendu des composants qui lisent cette source d’état.

Un composant lit la source d’état en appelant useSyncExternalStore avec les méthodes d’abonnement et getSnapshot de la source d’état. Le crochet renvoie la valeur actuelle et effectue un nouveau rendu lorsqu’elle change.

Vous pouvez encapsuler cela dans un crochet personnalisé comme useStore afin que les composants appellent une seule fonction au lieu de configurer eux-mêmes les arguments du crochet à chaque fois.

Comme la source d’état est un objet situé au niveau du module, tout composant qui l’importe partage le même état, sans fournisseur de contexte. Il n’est nécessaire ni d’envelopper l’arbre ni de transmettre les propriétés en cascade.

C’est un avantage majeur des sources d’état externes : elles offrent un état global partagé avec un modèle simple fondé sur l’importation et l’utilisation, plutôt qu’une hiérarchie de fournisseurs.

Vous pouvez créer plusieurs petites sources d’état, chacune possédant une portion de l’état, plutôt qu’une seule source d’état monolithique. Les composants s’abonnent uniquement aux portions qui les intéressent.

Cela sépare les responsabilités et limite les nouveaux rendus, car la modification d’une portion ne perturbe jamais les composants qui lisent une autre portion.

Zustand, une bibliothèque populaire et minimaliste de gestion d’état, repose exactement sur ce modèle et utilise useSyncExternalStore en interne depuis la version 4. Sa petite API est essentiellement une fabrique createStore perfectionnée, enrichie d’une couche de sélection.

Comprendre ce lien démystifie ces bibliothèques : ce sont des enveloppes légères et ergonomiques autour de la même primitive que vous pouvez créer vous-même.

En transmettant à getSnapshot un sélecteur qui ne renvoie que la partie de l’état utilisée par un composant, vous garantissez que celui-ci n’est rendu à nouveau que lorsque cette partie change.

Le résultat du sélecteur doit donc être stable : mémorisez les valeurs dérivées pour éviter la boucle infinie causée par les nouvelles références, tout en limitant les mises à jour à la portion pertinente.

Pour déboguer, vous pouvez associer une étiquette à un gestionnaire d’état et consigner les mises à jour, ou l’intégrer aux outils de développement du navigateur afin de suivre quel gestionnaire d’état a changé et à quel moment.

Même un simple journal dans la console, placé dans la mise à jour et activé uniquement avec un indicateur de développement, vous aide à comprendre le flux de l’état pendant la création du gestionnaire d’état.

Comme le gestionnaire d’état est du JavaScript simple, vous pouvez tester directement sa logique : appelez la mise à jour et vérifiez que getSnapshot renvoie la nouvelle valeur, sans rien rendre.

Vous pouvez également le tester dans React en affichant un composant qui le lit et en vérifiant qu’un nouveau rendu se produit après la mise à jour, ce qui couvre à la fois le gestionnaire d’état et son intégration.

Rappelez-vous le contrat d’une méthode d’abonnement d’un gestionnaire d’état personnalisé.

Un gestionnaire d’état personnalisé a besoin d’un état, d’un abonnement et de getSnapshot. Une fabrique createStore, associée à une mise à jour qui informe les écouteurs, fournit un état global partagé sans fournisseur, puisque les importations de modules partagent une même instance.

Utilisez plusieurs gestionnaires d’état correspondant à différentes portions et des sélecteurs pour limiter les nouveaux rendus, en veillant à conserver des références stables. Zustand v4+ repose exactement sur ce modèle, et le gestionnaire d’état en JavaScript simple est facile à tester dans React comme en dehors.