Atomes : unité d’état dans Jotai

Dans Jotai, l’état est divisé en atomes : de petites unités indépendantes d’état réactif. Chaque atome contient une seule valeur et est créé en dehors des composants avec atom(initialValue).

Cela correspond au modèle mental qui consiste à diviser l’état en unités aussi petites et pertinentes que possible, plutôt qu’en un seul objet de stockage volumineux.

Lorsque la valeur d’un atome change, seuls les composants abonnés à cet atome précis sont rendus à nouveau. Les composants qui lisent d’autres atomes ne sont pas concernés.

Cette réactivité fine constitue le principal avantage de Jotai par rapport à React Context, qui rend à nouveau tous les consommateurs lors de chaque changement.

Définissez les atomes au niveau du module : const countAtom = atom(0). Cela garantit que l’identité de l’atome reste stable entre les rendus et qu’il n’est pas recréé à chaque montage du composant.

Les atomes sont de simples références légères ; ils ne contiennent pas leur propre valeur. La valeur se trouve dans le stockage de Jotai.

Par défaut, Jotai utilise un stockage global implicite. Vous n’avez pas besoin d’englober votre application dans un Provider pour commencer à utiliser les atomes, ce qui facilite son adoption dans les projets existants.

Les atomes sont accessibles globalement depuis n’importe quel composant de l’arbre, sans transmission de propriétés ni propagation de contexte.

Lorsque vous avez besoin de plusieurs instances indépendantes du même arbre de composants (par exemple, deux formulaires distincts possédant chacun leurs propres atomes d’état de formulaire), englobe chacune d’elles dans un Provider Jotai. Chaque Provider crée un stockage isolé.

C’est utile pour les architectures de micro-frontends ou les mises en page complexes comportant des îlots d’état indépendants.

Le stockage global conserve les atomes pendant toute la durée de vie de l’application. Le stockage d’un Provider délimité est réinitialisé lorsque le Provider est démonté, ce qui convient parfaitement aux boîtes de dialogue modales ou à l’état au niveau d’une page qui ne doit pas être conservé globalement.

Vous pouvez même transmettre une instance de stockage personnalisée au Provider pour isoler le rendu côté serveur.

Zustand utilise un objet de stockage unique avec des sélecteurs pour éviter les rendus à nouveau inutiles. Jotai divise l’état en atomes, et chaque composant s’abonne uniquement aux atomes qu’il lit.

Jotai convient davantage à un état d’interface utilisateur finement ciblé (valeurs individuelles de champs de saisie, indicateurs de bascule). Zustand convient bien à un état applicatif plus vaste et interconnecté.

React Context rend à nouveau chaque composant consommateur chaque fois que la valeur du contexte change, même si le composant consommateur ne s’intéresse qu’à un seul champ de l’objet de contexte.

Jotai résout ce problème : un composant qui utilise useAtom(nameAtom) n’est rendu à nouveau que lorsque nameAtom change, et non lorsqu’un autre atome change.

Jotai utilise par défaut la comparaison Object.is pour déterminer si la valeur d’un atome a changé. Si vous affectez à un atome la même valeur que celle qu’il contient déjà, aucun nouveau rendu n’est déclenché.

Pour les objets complexes, utilisez l’utilitaire selectAtom afin de dériver une valeur primitive stable à partir d’un grand atome et d’éviter les nouveaux rendus lorsque des champs sans rapport changent.

useState est local à un seul composant. Les atomes sont partagés dans tout l’arbre de composants sans transmission explicite. Lorsque deux composants frères lisent le même atome, ils restent automatiquement synchronisés.

Cela évite de devoir remonter l’état pour le partager entre composants, tout en maintenant un nombre minimal de nouveaux rendus.

Exemples d’atomes courants : const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). Ils sont définis une seule fois, puis importés n’importe où dans l’application.

Chaque atome est indépendant : la mise à jour de cartItemsAtom ne déclenche pas de nouveaux rendus dans les composants qui lisent uniquement themeAtom.

En quoi Jotai diffère-t-il de React Context concernant les rendus à nouveau ?

Les atomes constituent l'unité fondamentale de l'état dans Jotai. Ils sont créés avec atom(initialValue) en dehors des composants et partagés dans toute l'arborescence sans Provider par défaut. Lorsqu'un atome change, seuls les composants qui y sont abonnés sont rendus à nouveau.

Cette réactivité à granularité fine est le principal avantage de Jotai par rapport à React Context, et son modèle d'abonnement par atome diffère de l'approche fondée sur un magasin unique de Zustand.