What is the atomic state model (Jotai/Recoil)?

Question

Accepted Answer

The **atomic state model** (Jotai, Recoil) builds global state from many tiny, independent units called **atoms**, composed bottom-up — rather than one large top-down store (Redux) or a monolithic context. Components subscribe to individual atoms and re-render only when *those* change. ## Atoms — the smallest units of state ```jsx import { atom, useAtom } from "jotai"; const countAtom = atom(0); // a primitive atom — one piece of state const nameAtom = atom("Ann"); // another, independent ``` Each atom is a self-contained piece of state. You create as many as you need, each addressable on its own. ## Derived atoms — composition ```jsx // 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()), ); ``` Atoms compose into a dependency graph — derived atoms automatically update when the atoms they read change, like a spreadsheet. ## Using atoms — feels like useState, but global ```jsx function Counter() { const [count, setCount] = useAtom(countAtom); // global, but useState-like API return ; } function Display() { const [double] = useAtom(doubleAtom); // re-renders ONLY when doubleAtom changes } ``` ## Atomic (bottom-up) vs store (top-down) ```text 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) ``` ## Benefits and trade-offs ```text ✓ 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) ``` ## Why it matters The atomic model is a distinct, increasingly popular approach to global state that inverts Redux's top-down structure: instead of slicing a big store, you compose small atoms upward. Its built-in granularity gives efficient, targeted re-renders without selectors — directly addressing Context's performance issues. Understanding atoms (and derived atoms) rounds out your knowledge of the state-management design space, alongside single-store (Redux/Zustand) and reactive (MobX/Signals) models, helping you choose the paradigm that best fits an app's state shape.