Atomes dérivés et asynchrones

Créez un atome dérivé en transmettant une fonction d'accès : const doubleAtom = atom(get => get(countAtom) * 2). Cet atome ne stocke aucune valeur : il la recalcule chaque fois que countAtom change.

Les atomes dérivés sont toujours à jour, sans aucune synchronisation manuelle. Ils constituent l'équivalent Jotai des propriétés calculées.

Jotai suit les atomes auxquels on accède dans la fonction d'accès et réévalue automatiquement l'atome dérivé lorsque l'un d'eux change. Vous n'avez pas besoin de déclarer explicitement les dépendances.

Si la fonction d'accès appelle get(atomA) et get(atomB), l'atome dérivé est mis à jour chaque fois que atomA ou atomB change.

Un atome dérivé accessible en écriture possède à la fois une fonction d'accès et une fonction setter : atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). La lecture renvoie la valeur transformée ; l'écriture la transforme et la réenregistre.

Ce modèle permet une transformation bidirectionnelle des données sans exposer directement l'atome de base.

La fonction d'accès peut être asynchrone : const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai accepte nativement les promesses renvoyées par les fonctions d'accès des atomes.

Lorsque userIdAtom change, Jotai exécute automatiquement à nouveau la fonction d'accès asynchrone et le composant qui l'utilise est suspendu pendant la récupération.

Les atomes asynchrones s'intègrent parfaitement à React Suspense. Encapsulez le composant qui les utilise dans une limite Suspense avec une solution de repli. Le composant est suspendu tant que la promesse est en attente, puis s'affiche lorsqu'elle est résolue.

Cela élimine la gestion manuelle de l'état de chargement dans le composant : aucun indicateur isLoading et aucun useEffect pour récupérer les données.

Importez loadable depuis jotai/utils. Enveloppez un atome asynchrone : const loadableUserAtom = loadable(userAtom). Les composants qui lisent loadableUserAtom reçoivent {state: 'loading'}, {state: 'hasData', data: user} ou {state: 'hasError', error}, sans être suspendus.

Utilisez loadable lorsque vous devez afficher directement un état de chargement personnalisé plutôt que de vous appuyer sur une limite Suspense.

L'utilitaire atomWithReset de jotai/utils crée un atome qui peut être réinitialisé à sa valeur initiale au moyen du symbole RESET. Cette approche est plus claire que de suivre manuellement la valeur initiale et de la réappliquer.

Dans les formulaires, réinitialisez tous les atomes de champs lors de l'envoi ou de l'annulation en appelant chaque setter avec RESET dans un gestionnaire unique.

Un atome dérivé peut lire plusieurs autres atomes : const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Cela crée une référence stable unique qui est mise à jour lorsqu'une dépendance change.

Les composants qui ont uniquement besoin du résumé s'abonnent à summaryAtom plutôt qu'aux trois atomes individuels.

Les atomes dérivés peuvent lire conditionnellement différents atomes : const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). Lorsque modeAtom change, l'atome dérivé change automatiquement de source de données.

Jotai s'abonne à nouveau au bon atome lors de chaque évaluation, ce qui garantit l'absence de données obsolètes provenant de la branche inactive.

Si la fonction d'accès d'un atome asynchrone lève une erreur ou rejette sa promesse, l'erreur est propagée jusqu'à la limite d'erreur React la plus proche lorsqu'il est utilisé avec Suspense. Avec loadable, l'erreur apparaît dans le champ state.error pour être traitée directement.

En code de production, associez toujours les atomes asynchrones à ErrorBoundary ou enveloppez-les avec loadable.

Les atomes dérivés mémorisent leur dernier résultat. Si tous les atomes dont ils dépendent renvoient les mêmes valeurs que lors de l'évaluation précédente, l'atome dérivé renvoie la même référence et aucun composant en aval n'est rendu à nouveau.

Pour les dérivations coûteuses, comme les transformations de grands tableaux, cette mémorisation offre des gains de performance importants sans configuration supplémentaire.

Que devient un composant qui lit un atome asynchrone pendant que sa promesse est en attente ?

Les atomes dérivés calculent des valeurs à partir d'autres atomes au moyen de fonctions d'accès, avec un suivi automatique des dépendances. Les atomes asynchrones utilisent des fonctions d'accès asynchrones et s'intègrent à React Suspense par défaut ; utilisez loadable depuis jotai/utils pour désactiver ce comportement et gérer directement les états de chargement et d'erreur.

Les atomes dérivés accessibles en écriture permettent des transformations bidirectionnelles, et les atomes conditionnels changent dynamiquement de source de données en fonction des valeurs d'autres atomes.