Le problème des abonnements aux magasins externes

Une source d’état externe est toute source d’état située en dehors de l’arbre React, comme un magasin Redux, une API du navigateur telle que matchMedia ou un simple objet défini au niveau d’un module avec son propre mécanisme d’abonnement.

React ne possède pas cet état. Il doit donc s’abonner aux changements et lire des instantanés afin de maintenir les composants synchronisés avec ce que la source contient actuellement.

Une approche courante consiste à lire la valeur de la source dans useState, puis à utiliser useEffect pour s’abonner et appeler setState chaque fois que la source change. En apparence, cela semble maintenir le composant à jour.

Cette approche fonctionne pour un rendu synchrone simple, mais elle présente un défaut subtil qui devient visible lorsque React effectue un rendu concurrent et peut suspendre ou relancer le travail en cours.

Un déchirement se produit lorsque différentes parties de l’interface affichent des valeurs différentes d’une même source pendant une seule phase de rendu. Le rendu concurrent peut interrompre puis reprendre le travail, et la source peut changer entre-temps.

Il en résulte un écran incohérent : un composant affiche l’ancienne valeur tandis qu’un autre affiche la nouvelle. Une telle incohérence était pratiquement impossible avant les fonctionnalités concurrentes.

Imaginez que de nombreux composants lisent une source de thème pendant que React effectue un rendu concurrent. Si l’utilisateur active le mode sombre en cours de route, les composants rendus avant l’activation affichent le thème clair et ceux rendus après affichent le thème sombre.

Vous obtenez pendant une image un écran à moitié clair et à moitié sombre, car la valeur de la source a changé au cours d’un rendu que React n’a pas traité de manière atomique.

Les effets s’exécutent après la validation du rendu. Un abonnement fondé sur useEffect ne peut donc pas garantir que la valeur lue pendant le rendu correspond encore à celle de la source au moment de la validation. L’abonnement se déclenche trop tard pour empêcher un affichage incohérent.

Lorsque l’effet se réabonne et met à jour l’état, l’image incohérente a peut-être déjà été affichée à l’utilisateur.

Une ancienne API expérimentale appelée useMutableSource tentait de résoudre le problème des lectures concurrentes sûres depuis une source externe, mais son utilisation correcte s’est révélée difficile et elle n’a jamais été publiée comme API stable.

L’équipe React l’a remplacée par un mécanisme plus simple et plus ergonomique, qui offre les mêmes garanties de cohérence sans ces pièges.

useSyncExternalStore est le mécanisme officiel pour s’abonner de manière sûre aux sources externes en contexte concurrent. Il se coordonne avec React afin que les lectures restent cohérentes pendant un rendu et que les composants ne se déchirent jamais.

Il est devenu le mécanisme recommandé aux auteurs de bibliothèques qui doivent intégrer de manière fiable un état externe dans React pendant un rendu concurrent.

Les bibliothèques d’état qui s’abonnent à des sources externes ont été directement concernées, notamment Redux, MobX et Valtio. Chacune devait adopter le nouveau mécanisme pour rester sûre après l’arrivée des fonctionnalités concurrentes.

C’est pourquoi leurs liaisons React ont été mises à jour pour appeler useSyncExternalStore en interne plutôt que de s’appuyer sur l’ancien modèle useState associé à useEffect.

Le crochet garantit que chaque composant qui lit la source d’état pendant un rendu voit le même instantané, et force un nouveau rendu synchrone si la source d’état change d’une manière qui provoquerait sinon un déchirement.

Cette combinaison d’un instantané cohérent et d’une sécurité en contexte concurrent constitue la principale valeur que le crochet apporte par rapport aux abonnements écrits manuellement.

En utilisant useSyncExternalStore, vos abonnements restent corrects à mesure que React fait évoluer son modèle de rendu. Vous bénéficiez des garanties du cadre au lieu de les réimplémenter de manière imparfaite.

Il s’agit donc de la méthode durable et recommandée pour relier n’importe quelle source de vérité externe aux composants React.

Confirmez ce que signifie le déchirement dans le rendu concurrent.

Les sources d’état externes vivent en dehors de React, et l’abonnement naïf combinant useState et useEffect ne peut pas empêcher le déchirement lorsque le rendu devient concurrent. Les effets s’exécutent trop tard pour maintenir des lectures cohérentes au sein d’un rendu.

useSyncExternalStore remplace useMutableSource, désormais abandonné, et fournit un instantané cohérent ainsi qu’une sécurité en contexte concurrent. Des bibliothèques comme Redux, MobX et Valtio l’ont adopté comme primitive pérenne pour les abonnements aux sources d’état.