useStateとuseReducerの違いと設計思想

1. 状態管理の責任の持ち方

• useState
  • 状態（state）を持つだけ。
  • 状態の更新ロジック（どう変えるか）はコンポーネント側が担当する。
• useReducer
  • 状態だけでなく、状態の更新方法（reducer関数）も一緒に管理する。
  • 状態変更の手続きを明確に定義できる。

---

2. 状態と処理の分離

• useState
  • setXxx() を呼び出して、コンポーネント内で状態を好きなように変える。
• useReducer
  • 状態の変化パターンを reducer 関数にまとめる。
  • コンポーネントは単に「こういう操作をしてほしい」という**アクション（命令）**を送るだけになる。

→ 状態と操作の責務を分離できる。

---

3. 純粋性（Pure Function）

• useState
  • 基本的には問題ないが、更新ロジックがコンポーネントに散らばりがち。
• useReducer
  • reducer関数は純粋関数であるべき（同じ入力なら同じ出力を保証する）。
  • 副作用を持たず、状態の変化だけに集中できる。

→ 状態遷移が予測可能になり、テストしやすくなる。

---

4. 適材適所（使い分け）

• 状態が単純（数個のフィールドだけ） → useStateで十分。
• 状態が複雑（フィールドが多い、操作も色々） → useReducerを使った方が整理しやすい。
• アクションによって状態がいろいろ変わる（例：フォーム、複雑なUIコンポーネント）ときはuseReducerが向いている。