El modelo de estado atómico (Jotai, Recoil) construye el estado global a partir de muchas unidades pequeñas e independientes llamadas átomos, compuestas de abajo hacia arriba — en lugar de un único almacén grande de arriba hacia abajo (Redux) o un contexto monolítico. Los componentes se suscriben a átomos individuales y se re-renderizan solo cuando esos cambian.
{ atom, useAtom } ;
countAtom = ();
nameAtom = ();
Cada átomo es una pieza de estado independiente. Creas tantos como necesites, cada uno direccionable por sí solo.
// 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()),
);
Los átomos se componen en un gráfico de dependencias — los átomos derivados se actualizan automáticamente cuando cambian los átomos que leen, como una hoja de cálculo.
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
}
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)
✓ 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)
El modelo atómico es un enfoque distinto y cada vez más popular para el estado global que invierte la estructura de arriba hacia abajo de Redux: en lugar de dividir un almacén grande, compones pequeños átomos hacia arriba.
Su granularidad integrada proporciona re-renders eficientes y dirigidos sin selectores — abordando directamente los problemas de rendimiento de Context.
Comprender los átomos (y átomos derivados) completa tu conocimiento del espacio de diseño de gestión de estado, junto con los modelos de almacén único (Redux/Zustand) y reactivos (MobX/Signals), ayudándote a elegir el paradigma que mejor se ajuste a la forma de estado de una aplicación.