Il modello di stato atomico (Jotai, Recoil) costruisce lo stato globale da molte piccole unità indipendenti chiamate atom, composte dal basso verso l'alto — anziché un unico grande store top-down (Redux) o un context monolitico. I componenti si sottoscrivono ai singoli atom e si ri-renderizzano solo quando questi cambiano.
Atoms — le unità più piccole di stato
import { atom, useAtom } from "jotai";
const countAtom = atom(0); // a primitive atom — one piece of state
const nameAtom = atom("Ann"); // another, independent
Ogni atom è un pezzo di stato auto-contenuto. Crei quanti ne hai bisogno, ognuno indirizzabile in modo indipendente.
Atom derivati — composizione
// a derived atom computes from other atoms; recomputes when its dependencies change
const doubleAtom = atom((get) => get(countAtom) * 2);
const greetingAtom = atom((get) => `Hello, ${get(nameAtom)}`);
// writable derived atom
const upperNameAtom = atom(
(get) => get(nameAtom).toUpperCase(),
(get, set, newVal) => set(nameAtom, newVal.toLowerCase()),
);
Gli atom si compongono in un grafo di dipendenze — gli atom derivati si aggiornano automaticamente quando gli atom che leggono cambiano, come un foglio di calcolo.
Utilizzare gli atom — simile a useState, ma globale
function Counter() {
const [count, setCount] = useAtom(countAtom); // global, but useState-like API
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
function Display() {
const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes
}
Atomico (bottom-up) vs store (top-down)
Redux (top-down): one big state tree; you carve slices/selectors OUT of it
Atomic (bottom-up): start with tiny atoms; compose them UP into derived state
Granularity: each atom is independently subscribable → naturally fine-grained
re-renders (a component using countAtom ignores nameAtom changes)
Vantaggi e compromessi
✓ Fine-grained re-renders by default (subscribe to exactly the atoms you use)
✓ No selector boilerplate; derived state is just another atom
✓ Solves Context's "re-render everything" problem
✓ Great for state that's naturally decomposed into many independent pieces
✗ Many atoms can be harder to organize/trace than one centralized store
✗ Less rigid structure than Redux (a pro or con depending on the team)
Perché è importante
Il modello atomico è un approccio distinto e sempre più popolare allo stato globale che inverte la struttura top-down di Redux: anziché dividere un grande store, componi piccoli atom dal basso verso l'alto.
La sua granularità incorporata offre re-render efficienti e mirati senza selettori — affrontando direttamente i problemi di performance di Context.
Comprendere gli atom (e gli atom derivati) completa la tua conoscenza dello spazio di progettazione della gestione dello stato, insieme ai modelli a singolo store (Redux/Zustand) e reattivi (MobX/Signals), aiutandoti a scegliere il paradigma più adatto alla forma dello stato di un'applicazione.