Atomi: l'unità di stato in Jotai

In Jotai, lo stato è suddiviso in atomi: piccole unità indipendenti di stato reattivo. Ogni atomo contiene un singolo valore e viene creato al di fuori dei componenti con atom(initialValue).

Questo riflette il modello mentale che consiste nel suddividere lo stato nelle più piccole unità significative, anziché utilizzare un unico grande oggetto store.

Quando cambia il valore di un atomo, viene eseguito nuovamente il rendering solo dei componenti che si sono sottoscritti a quello specifico atomo. I componenti che leggono altri atomi non vengono interessati.

Questa reattività granulare è il principale vantaggio di Jotai rispetto a React Context, che esegue nuovamente il rendering di tutti i consumer a ogni modifica.

Definisca gli atomi a livello di modulo: const countAtom = atom(0). In questo modo l’identità dell’atomo rimane stabile tra i rendering e l’atomo non viene ricreato a ogni montaggio del componente.

Gli atomi sono riferimenti leggeri; non contengono direttamente il proprio valore. Il valore risiede nello store di Jotai.

Per impostazione predefinita, Jotai utilizza uno store globale implicito. Non è necessario racchiudere l’applicazione in un Provider per iniziare a utilizzare gli atomi, semplificando l’adozione in progetti esistenti.

Gli atomi sono accessibili globalmente da qualsiasi componente dell’albero, senza dover passare props tra componenti o propagare il contesto.

Quando sono necessarie più istanze indipendenti dello stesso albero di componenti, ad esempio due moduli separati, ciascuno con i propri atomi per lo stato del modulo, racchiuda ogni istanza in un Provider di Jotai. Ogni Provider crea uno store isolato.

Questo è utile nelle architetture micro-frontend o nei layout complessi con isole di stato indipendenti.

Lo store globale conserva gli atomi per tutta la durata dell’applicazione. Lo store di un Provider con ambito viene reimpostato quando il Provider viene smontato, risultando ideale per finestre modali o per lo stato a livello di pagina che non deve essere mantenuto globalmente.

È anche possibile passare a Provider un’istanza di store personalizzata per isolare il rendering lato server.

Zustand utilizza un unico oggetto store con selettori per evitare rendering non necessari. Jotai suddivide lo stato in atomi e ogni componente si sottoscrive solo agli atomi che legge.

Jotai è più naturale per uno stato dell’interfaccia granulare, come i singoli valori degli input e i flag dei toggle. Zustand è adatto agli stati applicativi più grandi e interconnessi.

React Context esegue nuovamente il rendering di ogni componente consumer ogni volta che cambia il valore del contesto, anche se il componente utilizza solo un campo dell’oggetto di contesto.

Jotai risolve questo problema: un componente che utilizza useAtom(nameAtom) viene renderizzato nuovamente solo quando cambia nameAtom, non quando cambia un altro atomo.

Per impostazione predefinita, Jotai utilizza il confronto Object.is per determinare se il valore di un atomo è cambiato. Se si assegna a un atomo lo stesso valore che già contiene, non viene attivato alcun nuovo rendering.

Per gli oggetti complessi, utilizzi l’utilità selectAtom per ricavare un valore primitivo stabile da un atomo di grandi dimensioni, evitando nuovi rendering quando cambiano campi non correlati.

useState è locale a un singolo componente. Gli atomi sono condivisi nell’intero albero dei componenti senza doverli passare esplicitamente. Quando due componenti fratelli leggono lo stesso atomo, rimangono automaticamente sincronizzati.

In questo modo non è necessario sollevare lo stato per condividerlo tra componenti, mantenendo al contempo al minimo i nuovi rendering.

Atomi tipici: const themeAtom = atom('light'), const cartItemsAtom = atom([]), const selectedUserIdAtom = atom(null). Vengono definiti una sola volta e importati ovunque nell’applicazione.

Ogni atomo è indipendente: l’aggiornamento di cartItemsAtom non attiva nuovi rendering nei componenti che leggono solo themeAtom.

In che modo Jotai differisce da React Context per quanto riguarda il nuovo rendering?

Gli atom sono l'unità fondamentale dello stato in Jotai, creati con atom(initialValue) al di fuori dei componenti e condivisi nell'intero albero senza Provider per impostazione predefinita. Quando un atom cambia, eseguono nuovamente il rendering solo i suoi sottoscrittori.

Questa reattività a grana fine è il principale vantaggio di Jotai rispetto a React Context e il suo modello di sottoscrizione per atom è diverso dall'approccio a store singolo di Zustand.