Lire et écrire des atomes avec useAtom

useAtom(someAtom) renvoie [value, setter], à l'image de l'API useState. value correspond à l'état actuel de l'atome et setter le met à jour. Utilisez cette fonction lorsqu'un composant lit et écrit à la fois dans l'atome.

setter accepte soit une nouvelle valeur, soit une fonction de mise à jour : setCount(c => c + 1).

useAtomValue(someAtom) renvoie uniquement la valeur actuelle, sans setter. Utilisez cette fonction dans les composants d'affichage qui lisent l'état, mais ne le modifient jamais.

Comme le composant ne conserve pas de référence vers setter, l'intention est clairement documentée dans le code : ce composant se contente de lire.

useSetAtom(someAtom) renvoie uniquement la fonction setter. Surtout, cette fonction n'abonne pas le composant à la valeur de l'atome. Le composant n'est jamais rendu à nouveau lorsque l'atome change.

Utilisez-la pour les composants uniquement dédiés aux actions, comme les boutons qui déclenchent des modifications d'état sans afficher d'interface utilisateur dérivée.

Un composant qui appelle useSetAtom(countAtom) pour incrémenter un compteur ne sera jamais rendu à nouveau lorsque countAtom change, car il ne s'abonne pas à sa valeur. Seul le composant qui affiche le compteur est rendu à nouveau.

Cette optimisation est simple, mais puissante : séparez les composants qui écrivent de ceux qui lisent afin d'éviter les rendus à nouveau en cascade.

Importez atomWithStorage depuis jotai/utils. Utilisez-le exactement comme atom(), mais transmettez une clé de stockage comme premier argument : atomWithStorage('theme', 'light'). L'atome se synchronise automatiquement avec localStorage.

Au rechargement de la page, l'atome s'hydrate depuis localStorage. Tous les composants qui lisent l'atome récupèrent immédiatement la valeur persistante.

Le symbole RESET de jotai/utils peut être transmis à setter pour un atome atomWithStorage : setter(RESET). Cela efface l'entrée de localStorage et réinitialise l'atome à sa valeur initiale.

C'est utile pour les flux de déconnexion ou les boutons « rétablir les valeurs par défaut » des pages de paramètres.

atomFamily de jotai/utils crée une fabrique qui renvoie un atome paramétré. Par exemple, atomFamily(id => atom(null)) crée un atome distinct pour chaque id unique fourni.

C'est idéal pour gérer un état propre à chaque élément, comme selectedAtom(itemId) ou expandedAtom(rowId), sans gérer un seul grand atome de correspondance.

Les familles d'atomes peuvent croître sans limite si les ID s'accumulent. Utilisez atomFamily.setShouldRemove((createdAt, param) => ...) pour définir un prédicat de nettoyage que Jotai appelle lorsqu'il détermine quels membres obsolètes de la famille doivent être supprimés.

Pour les listes dont les éléments sont ajoutés et supprimés, nettoyez toujours les entrées de la famille d'atomes lorsque les éléments sont supprimés afin d'éviter les fuites de mémoire.

Le paquet jotai-devtools fournit un panneau visuel qui répertorie tous les atomes actifs et leurs valeurs actuelles. Installez-le, encapsulez votre application dans DevTools et inspectez l'état des atomes en temps réel.

Chaque mise à jour d'un atome est consignée avec la valeur précédente et la valeur suivante, ce qui simplifie le débogage des interactions complexes entre atomes.

Dans une grande liste, un composant ListContainer peut utiliser useSetAtom(selectedIdAtom) pour mettre à jour la sélection sans s'abonner à selectedIdAtom. Seuls les composants ListItem individuels qui appellent useAtomValue(selectedIdAtom) sont rendus à nouveau lorsque la sélection change.

Ce modèle s'adapte bien à la croissance : l'ajout de milliers d'éléments à la liste ne ralentit pas les mises à jour de la sélection.

Choisissez la fonction qui correspond au besoin de votre composant : useAtomValue pour le simple affichage, useSetAtom pour les actions seules, et useAtom lorsque vous avez besoin des deux. Cette conception intentionnelle de l'API rend la responsabilité du composant immédiatement claire.

Un composant de champ de formulaire utilise généralement useAtom ; un bouton d'envoi utilise useSetAtom ; une étiquette qui affiche un compteur utilise useAtomValue.

Quel est le principal avantage d'utiliser useSetAtom plutôt que useAtom ?

useAtom fournit à la fois la valeur et setter ; useAtomValue fournit uniquement la valeur, avec un abonnement en lecture ; useSetAtom fournit uniquement setter, sans nouveau rendu lorsque la valeur change. atomWithStorage conserve la valeur dans localStorage avec la prise en charge de RESET, et atomFamily crée des atomes propres à chaque paramètre pour les listes dynamiques.

Choisir la bonne fonction réduit les rendus à nouveau inutiles et explicite l'intention du composant.