React で状態管理のアプローチをどのように選びますか?

Question

Accepted Answer

デフォルトでグローバルストアに手を伸ばすのではなく、状態の**種類**にツールを合わせます。ほとんどの「グローバル状態」の問題は、実際には仕事に対して間違ったツールを選んでいるだけです。

## 意思決定ガイド

```text
Local UI state (toggle, input)      → useState / useReducer
Shared, low-frequency (theme, user) → Context
Server/API data                     → React Query / SWR  (NOT a global store)
Complex global client state         → Zustand / Jotai / Redux Toolkit
URL-shareable state (filters, page) → the URL (search params)
```

## 最も重要な洞察: サーバー状態 ≠ クライアント状態

API からのデータは、あなたが所有する状態ではなく、リモートデータの**キャッシュ**です。これを Redux に入れると、ローディング、キャッシュ、再取得、無効化を手動で扱うことになり、面倒でバグを生みやすくなります。サーバー状態ライブラリはそれらをすべて行います:

```jsx
// handles caching, dedup, background refetch, stale-while-revalidate for free
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## ガイドライン

- 状態は可能な限り**ローカル**に保ち、使われる場所の近くに配置(コロケーション)します。
- 速く変化する値を **Context** に入れない(すべてのコンシューマを再レンダリングします)。
- 頻繁に更新される共有クライアント状態には、**選択的なサブスクリプション**を備えたストア(Zustand/Jotai)を選び、コンポーネントが読み取るスライスに対してのみ再レンダリングされるようにします。
- 本当に複雑な共有状態に対して devtools/ミドルウェア/構造が必要なときは、Redux Toolkit に手を伸ばします。

本当のスキルは、ライブラリを選ぶことではなく、状態を**最小化し正しく配置する**ことです。