Leggere e scrivere atomi con useAtom

useAtom(someAtom) restituisce [value, setter], rispecchiando l'API di useState. Il valore è lo stato corrente dell'atom; il setter lo aggiorna. Utilizzi questo hook quando un componente legge e scrive l'atom.

Il setter accetta un nuovo valore oppure una funzione di aggiornamento: setCount(c => c + 1).

useAtomValue(someAtom) restituisce solo il valore corrente, senza setter. Lo utilizzi nei componenti di sola visualizzazione che leggono lo stato ma non lo modificano mai.

Poiché il componente non conserva un riferimento al setter, l'intento è documentato chiaramente nel codice: questo componente è un lettore puro.

useSetAtom(someAtom) restituisce solo la funzione setter. È importante notare che non sottoscrive il componente al valore dell'atom. Il componente non esegue mai un nuovo rendering quando l'atom cambia.

Lo utilizzi per componenti di sole azioni, come i pulsanti che attivano modifiche allo stato ma non visualizzano alcuna UI derivata.

Un componente che chiama useSetAtom(countAtom) per incrementare un contatore non esegue mai un nuovo rendering quando countAtom cambia, perché non ha alcuna sottoscrizione al valore. Esegue nuovamente il rendering solo il componente che visualizza il conteggio.

Si tratta di un'ottimizzazione semplice ma potente: separare gli scrittori dai lettori per impedire nuovi rendering a cascata.

Importi atomWithStorage da jotai/utils. Lo utilizzi esattamente come atom(), ma passi una chiave di storage come primo argomento: atomWithStorage('theme', 'light'). L'atom si sincronizza automaticamente con localStorage.

Quando la pagina viene ricaricata, l'atom viene idratato da localStorage. Tutti i componenti che leggono l'atom ricevono immediatamente il valore persistito.

Il simbolo RESET di jotai/utils può essere passato al setter di un atomWithStorage: setter(RESET). In questo modo viene cancellata la voce in localStorage e l'atom viene reimpostato al valore iniziale.

È utile nei flussi di logout o per i pulsanti «ripristina impostazioni predefinite» nelle pagine delle impostazioni.

atomFamily di jotai/utils crea una factory che restituisce un atom parametrizzato. Ad esempio, atomFamily(id => atom(null)) crea un atom separato per ogni id univoco passato.

È ideale per gestire lo stato dei singoli elementi, come selectedAtom(itemId) o expandedAtom(rowId), senza dover gestire un unico atom contenente una grande mappa.

Le famiglie di atom possono crescere senza limite se gli ID si accumulano. Utilizzi atomFamily.setShouldRemove((createdAt, param) => ...) per definire un predicato di pulizia che Jotai usa per decidere quando espellere i membri obsoleti della famiglia.

Per le liste in cui gli elementi vengono aggiunti e rimossi, elimini sempre le voci della famiglia di atom quando gli elementi vengono cancellati, così da evitare perdite di memoria.

Il pacchetto jotai-devtools fornisce un pannello visivo che elenca tutti gli atom attivi e i relativi valori correnti. Lo installi, avvolga l'app in DevTools e ispezioni lo stato degli atom in tempo reale.

Ogni aggiornamento di un atom viene registrato con il valore precedente e quello successivo, rendendo semplice il debug delle interazioni complesse tra atom.

In una lista di grandi dimensioni, un componente ListContainer può usare useSetAtom(selectedIdAtom) per aggiornare la selezione senza sottoscriversi a selectedIdAtom. Eseguono nuovamente il rendering solo i singoli componenti ListItem che chiamano useAtomValue(selectedIdAtom) quando cambia la selezione.

Questo schema si adatta bene alla crescita: aggiungere migliaia di elementi alla lista non rallenta gli aggiornamenti della selezione.

Scelga l'hook in base alle esigenze del componente: useAtomValue per la sola visualizzazione, useSetAtom per le sole azioni e useAtom quando servono entrambe. Questo design intenzionale dell'API rende chiara a colpo d'occhio la responsabilità del componente.

Un componente che rappresenta un campo di un modulo in genere utilizza useAtom; un pulsante di invio utilizza useSetAtom; un'etichetta che visualizza un conteggio utilizza useAtomValue.

Qual è il principale vantaggio dell'utilizzo di useSetAtom invece di useAtom?

useAtom fornisce sia il valore sia il setter; useAtomValue fornisce solo il valore (sottoscrizioni di lettura); useSetAtom fornisce solo il setter (nessun nuovo rendering quando cambia il valore). atomWithStorage persiste i dati in localStorage con il supporto di RESET, mentre atomFamily crea atom associati ai singoli parametri per le liste dinamiche.

La scelta dell'hook corretto riduce al minimo i nuovi rendering non necessari e rende esplicito l'intento del componente.