Atomi derivati e asincroni

Crei un atom derivato passando una funzione getter: const doubleAtom = atom(get => get(countAtom) * 2). Questo atom non memorizza alcun valore; viene ricalcolato ogni volta che countAtom cambia.

Gli atom derivati sono sempre aggiornati senza alcuna sincronizzazione manuale. Sono l'equivalente Jotai delle proprietà calcolate.

Jotai tiene traccia degli atom a cui si accede all'interno della funzione getter e rivaluta automaticamente l'atom derivato quando uno qualsiasi di essi cambia. Non è necessario dichiarare esplicitamente le dipendenze.

Se il getter chiama get(atomA) e get(atomB), l'atom derivato si aggiorna ogni volta che cambia atomA o atomB.

Un atom derivato scrivibile ha sia un getter sia un setter: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). La lettura restituisce il valore trasformato; la scrittura lo trasforma e lo memorizza nuovamente.

Questo schema implementa una trasformazione bidirezionale dei dati senza esporre direttamente l'atom di base.

La funzione getter può essere asincrona: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai accetta nativamente le Promise restituite dai getter degli atom.

Quando userIdAtom cambia, Jotai esegue nuovamente il getter asincrono e il componente che lo utilizza viene sospeso durante il recupero dei dati.

Gli atom asincroni si integrano perfettamente con React Suspense. Avvolga il componente che li utilizza in un confine Suspense con un fallback. Il componente viene sospeso mentre la Promise è in attesa e viene renderizzato quando si risolve.

Questo elimina la gestione manuale dello stato di caricamento nel componente: nessun flag isLoading e nessun useEffect per il recupero dei dati.

Importi loadable da jotai/utils. Avvolga un atom asincrono: const loadableUserAtom = loadable(userAtom). I componenti che leggono loadableUserAtom ricevono {state: 'loading'}, {state: 'hasData', data: user} oppure {state: 'hasError', error}, senza entrare in sospensione.

Utilizzi loadable quando deve visualizzare uno stato di caricamento personalizzato direttamente nell'interfaccia invece di affidarsi a un confine Suspense.

L'utility atomWithReset di jotai/utils crea un atom che può essere reimpostato al valore iniziale utilizzando il simbolo RESET. È più chiaro che tenere traccia manualmente del valore iniziale e riapplicarlo.

Nei moduli, reimposti tutti gli atom dei campi al momento dell'invio o dell'annullamento chiamando ogni setter con RESET in un unico gestore.

Un atom derivato può leggere diversi altri atom: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Questo crea un unico riferimento stabile che si aggiorna quando cambia una qualsiasi dipendenza.

I componenti che hanno bisogno solo del riepilogo si sottoscrivono a summaryAtom anziché a tutti e tre gli atom individuali.

Gli atom derivati possono leggere condizionalmente atom diversi: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). Quando modeAtom cambia, l'atom derivato cambia automaticamente la propria sorgente dati.

Jotai crea nuovamente la sottoscrizione all'atom corretto a ogni valutazione, garantendo che non rimangano dati obsoleti del ramo inattivo.

Se il getter di un atom asincrono genera un errore o rifiuta la Promise, l'errore viene propagato al più vicino ErrorBoundary di React quando l'atom viene utilizzato con Suspense. Con loadable, l'errore appare nel campo state.error per una gestione direttamente nell'interfaccia.

Nel codice di produzione, abbini sempre gli atom asincroni a un ErrorBoundary oppure a un wrapper loadable.

Gli atom derivati memorizzano in cache il loro ultimo risultato. Se tutti gli atom dipendenti restituiscono gli stessi valori della valutazione precedente, l'atom derivato restituisce lo stesso riferimento e non si verificano nuovi rendering a valle.

Per derivazioni costose, come le trasformazioni di array di grandi dimensioni, questa memorizzazione in cache offre notevoli vantaggi in termini di prestazioni senza alcuna configurazione aggiuntiva.

Che cosa accade a un componente che legge un atom asincrono mentre la sua Promise è in attesa?

Gli atom derivati calcolano valori a partire da altri atom usando funzioni getter con rilevamento automatico delle dipendenze. Gli atom asincroni utilizzano getter asincroni e si integrano con React Suspense per impostazione predefinita; utilizzi loadable di jotai/utils per evitarlo e gestire direttamente nell'interfaccia gli stati di caricamento e di errore.

Gli atom derivati scrivibili consentono trasformazioni bidirezionali, mentre gli atom condizionali cambiano dinamicamente la sorgente dati in base ai valori di altri atom.