useState ではなく useReducer を使うのはどんなときですか？

Question

Accepted Answer

`useReducer` は、多数の `useState` セッターに状態遷移を散在させる代わりに、それらを単一の**純粋なリデューサー関数**に集約します。これは React 組み込みの Redux パターンと言えます。 ```jsx function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "setStep": return { ...state, step: action.payload }; case "reset": return { count: 0, step: 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0, step: 1 }); // describe WHAT happened, not HOW state changes: return ; } ``` ## どのように動作するか **アクション**（イベントを記述したプレーンオブジェクト）を `dispatch` します。React は `reducer(currentState, action)` を呼び出し、返されたオブジェクトを新しい状態として使います。リデューサーは**純粋**（副作用なし、ミューテーションなし）であるため、ロジックが予測可能になり、単体で独立してテストできます。 ## useState より優先すべきとき - 次の状態が、自明でない形で**前の状態に依存する**場合。 - 複数の値が**まとまって変化する**場合（例：`count` + `step` + `error`）。 - 更新ロジックが複雑で、複数のハンドラ間で繰り返すことになる場合。 ```jsx // instead of 4 separate useState + 6 setters, one reducer owns it all ``` おまけ：`dispatch` は**安定した識別子**を持つため、context 経由やメモ化された子に渡しても再レンダリングを引き起こしません。単純で互いに独立した値については、依然としてプレーンな `useState` のほうが明快です。