atom と useAtom で始めるシンプルな状態管理
Jotai（状態）は、React の状態管理をシンプルにするライブラリです。atomという単位で状態を定義し、useAtomフックで読み書きします。
コア API は atom と useAtom だけ。学習コストが低い
useState と同じ感覚で使える。移行が簡単
atom 単位で購読するため、不要な再レンダリングが起きない
インストール
pnpm add jotaiStep 1: Atom を定義する
// コンポーネントの外で定義する（重要！）
const countAtom = atom(0);Step 2: コンポーネントで使う
const [count, setCount] = useAtom(countAtom);
// ↑ useState とほぼ同じ使い方！上のカウンターはuseAtomValueとuseSetAtomを別々のコンポーネントで使っています。
値だけ読む（再レンダリング最適化）
const count = useAtomValue(countAtom);値を書くだけ（値変更で再レンダリングしない）
const setCount = useSetAtom(countAtom);両方使う（useState と同じ）
const [count, setCount] = useAtom(countAtom);const nameAtom = atom("");
const [name, setName] = useAtom(nameAtom);現在の状態
{
"name": "",
"age": 0
}オブジェクトの更新（スプレッド構文）
setProfile((prev) => ({ ...prev, name: value }));
// ↑ 既存のプロパティを残しつつ、一部を更新| 特徴 | useState | Jotai |
|---|---|---|
| スコープ | コンポーネント内 | グローバル（アプリ全体） |
| 状態の共有 | props で渡す必要あり | どこからでもアクセス可能 |
| 再レンダリング | 親の再レンダリングが伝播 | atom を使うコンポーネントだけ |
| 向いている場面 | ローカルな UI 状態 | 複数コンポーネント間で共有する状態 |
派生 Atom（Derived Atom）で、既存の atom から新しい値を計算する方法を学びましょう。