useReducerとは

useReducerは、状態をあらわすstateとactionを送信する関数であるdispatchを返すhookです。useStateと似て、コンポーネント内でstate管理をする仕組みを提供します。

サンプルコード

import "./styles.css";import React, { useReducer } from "react";function reducer(state, action) {  switch (action.type) { case "INCREMENT":return { count: state.count + 1 }; case "DECREMENT":return { count: state.count - 1 }; case "RESET":return { count: 0 }; default:return state;  }}export default function App() {  const [state, dispatch] = useReducer(reducer, { count: 0 });  return ( <div className="App"><h1>useReducer sample</h1><h2>let's start counting</h2><p>count: {state.count}</p><button onClick={() => dispatch({ type: "INCREMENT" })}> + </button><button onClick={() => dispatch({ type: "DECREMENT" })}> - </button><button onClick={() => dispatch({ type: "RESET" })}> reset </button> </div>  );}

動作デモ：

useState, useContextとの違い

useReducerはuseStateと比べて、複雑なstate管理に向いています。

ちなみに、useStateはuseReducerに内部実装されているそうです。

また、コンポーネント内でのステート管理を行うuseReducerに対して、コンポーネントをまたいでのstate管理を提供するのがuseContextです。コンポーネントの階層が何段階にも及ぶ場合、propsの「バケツリレー」よりも効率的にstateを子コンポーネントへ伝えることができます。

参考

• フック API リファレンス – React
• React hooksを基礎から理解する (useReducer編) – Qiita
• ReactのState管理を比較してみた (useState / useReducer / React Context API / Redux / Recoil) – Qiita