【React】useReducerとは?概要とサンプルコード紹介

Categories:React

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管理に向いています。

下記のようなケースはuseReducerの方が適していると言われています。

・複数の値を操作する必要がある複雑なロジック

・前のstateに基づいて次のstateを操作したい時

ReactのState管理を比較してみた (useState / useReducer / React Context API / Redux / Recoil) – Qiita

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

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

参考

返信がありません

コメントを残す

メールアドレスが公開されることはありません。