各アトムは自己完結した状態の一片です。必要なだけ多くを作成でき、それぞれを独立してアドレス可能です。
// 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()),
);
アトムは依存グラフに合成されます — 導出されたアトムは、読み込むアトムが変更されると自動的に更新されます。スプレッドシートのようなものです。
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)
アトミックモデルは、Redux の top-down 構造を反転させた、グローバル状態への異なる、ますます人気のあるアプローチです。大きなストアを分割する代わりに、小さなアトムを上へ合成します。
組み込みの粒度により、セレクターなしで効率的で的確な再レンダリングが可能になり、Context のパフォーマンス問題に直接対処できます。
アトム (および導出されたアトム) を理解することは、単一ストア (Redux/Zustand) およびリアクティブ (MobX/Signals) モデルと共に、状態管理設計空間の知識を完成させ、アプリの状態形状に最適なパラダイムを選択するのに役立ちます。