MENU
  1. ホーム
  2. React
  3. ReactのuseReducerで親子コンポーネント間の複雑な状態管理を簡単に解説

ReactのuseReducerで親子コンポーネント間の複雑な状態管理を簡単に解説

React

Reactでの状態管理は、多くの場合、useStateフックを用いて実現されます。しかし、状態が複雑になったり、親子コンポーネント間で共有される場合、useStateだけでは管理が難しくなることがあります。このようなシナリオでは、useReducerを利用することで、より構造的で効率的な状態管理が可能になります。本記事では、useReducerを用いた親子コンポーネント間の状態管理の方法を、具体的なコード例とともに分かりやすく解説します。複雑な状態管理に悩んでいる方にとって、実践的なヒントを提供します。

目次

useReducerとは何か


useReducerは、Reactで状態管理を行うためのフックで、状態とその変更を厳密に管理するための手法を提供します。主に、状態の変更ロジックが複雑になる場合や、複数の状態を一元的に管理する必要がある場面で使用されます。

基本的な仕組み


useReducerは、以下の3つの要素を組み合わせて動作します：

  1. Reducer関数: 状態とアクションを受け取り、新しい状態を返す純粋関数。
  2. 現在の状態 (state): 現在の状態を保持します。
  3. dispatch関数: アクションをReducer関数に送信し、状態を更新します。

useReducerの構文


以下は、基本的な構文の例です：

const [state, dispatch] = useReducer(reducer, initialState);
  • reducer: 状態更新のロジックを含む関数。
  • initialState: 状態の初期値。

useReducerを使うシーン


useReducerは次のような場面で効果的です：

  • 複数の状態を関連付けて管理したい場合。
  • 状態変更のロジックが複雑で、条件分岐や多段階の処理が必要な場合。
  • Reduxを使うほどではないが、useStateでは限界を感じる場合。

useReducerを理解することで、Reactアプリケーションにおける状態管理をシンプルかつ堅牢に設計できるようになります。

useReducerを使う利点

useReducerは、複雑な状態管理を必要とするReactアプリケーションにおいて、useStateやReduxに比べていくつかの顕著な利点を持っています。ここでは、それらの利点を詳しく説明します。

状態管理の一元化


useReducerを利用することで、状態変更のロジックをReducer関数に集約できます。これにより、コードの可読性と保守性が向上し、状態管理が一貫性を持つようになります。例えば、以下のように状態更新が簡潔に記述できます：

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

Reduxほどの学習コストが不要


Reduxのようにミドルウェアやストアの設定が必要なく、Reactの標準APIで完結するため、学習コストが低いです。小規模から中規模のアプリケーションに最適で、軽量な状態管理を実現します。

複雑な状態変更ロジックへの対応


useReducerは、useStateでは難しい条件分岐や複雑なロジックをシンプルに記述できます。以下は複雑な状態変更を実現する例です：

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] };
    case 'REMOVE_ITEM':
      return { ...state, items: state.items.filter(item => item.id !== action.payload) };
    default:
      return state;
  }
}

パフォーマンスの向上


useReducerは、状態変更ロジックを単一のReducer関数に集約するため、不要な再レンダリングを減らし、パフォーマンスが向上する場合があります。

useStateとの比較

  • useState: シンプルな状態管理に適している。
  • useReducer: 状態が複雑で、多くの変更パターンを管理する必要がある場合に適している。

useReducerは、簡単な状態管理にはuseStateを、複雑な管理にはReduxを、といった選択肢の中間に位置する便利なツールです。その利点を理解しておくと、最適な状態管理方法を選べるようになります。

サンプル構成の説明

useReducerを使って親子コンポーネント間で複雑な状態を管理するための基本的なサンプル構成を説明します。この構成では、状態管理を親コンポーネントで行い、その状態と更新関数を子コンポーネントに渡します。

構成の概要


以下のようなReactコンポーネント構成を考えます：

  1. 親コンポーネント (ParentComponent)
  • 状態とReducer関数を管理。
  • 状態の一部とdispatch関数を子コンポーネントに渡す。
  1. 子コンポーネント (ChildComponent)
  • 親から受け取った状態を表示または利用。
  • 必要に応じてdispatch関数を用いて状態を更新。

サンプル構成のコード


以下のコードは、この構成を実現する基本的な例です。

import React, { useReducer } from 'react';

// Reducer関数
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 親コンポーネント
function ParentComponent() {
  const initialState = { count: 0 };
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>親コンポーネント</h1>
      <p>現在のカウント: {state.count}</p>
      <ChildComponent count={state.count} dispatch={dispatch} />
    </div>
  );
}

// 子コンポーネント
function ChildComponent({ count, dispatch }) {
  return (
    <div>
      <h2>子コンポーネント</h2>
      <p>受け取ったカウント: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>増加</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>減少</button>
    </div>
  );
}

export default ParentComponent;

コードのポイント

  1. 親コンポーネントで状態管理
    状態 (state) と dispatch 関数は useReducer を利用して管理します。
  2. 子コンポーネントへの状態と関数の共有
    子コンポーネントには、状態 (count) と状態を更新するための dispatch 関数を渡します。
  3. 子コンポーネントからの状態更新
    子コンポーネントは、ボタンをクリックして dispatch 関数を呼び出し、親の状態を更新します。

構成の意義


このような構成を採用することで、親子コンポーネント間の状態管理を明確に分離しつつ、簡潔で拡張性のあるコードを実現できます。親コンポーネントが状態の責任を持つため、アプリケーション全体の状態管理が整理されます。

useReducerの初期設定

useReducerを効果的に使用するには、Reducer関数、初期状態、そしてdispatch関数を適切に設定する必要があります。このセクションでは、それぞれの初期設定の手順を説明します。

Reducer関数の定義


Reducer関数は、現在の状態とアクションを受け取り、新しい状態を返す純粋関数です。状態更新のロジックを一元管理するための中核的な役割を果たします。

Reducer関数の基本形:

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state; // 状態を変更しない場合
  }
}

ポイント:

  • state は現在の状態オブジェクトを表します。
  • action は状態を変更する指示を含むオブジェクトで、通常 type プロパティを持ちます。
  • default ケースを忘れないようにし、予期しないアクションに対応します。

初期状態の定義


初期状態は、アプリケーションの開始時にReducer関数へ渡される状態オブジェクトです。useReducer の第2引数として設定します。

初期状態の例:

const initialState = {
  count: 0, // カウントの初期値
  isActive: false // その他の初期状態
};

useReducerの設定


Reducer関数と初期状態を useReducer に渡し、状態 (state) と dispatch 関数を生成します。

useReducerの使用例:

import React, { useReducer } from 'react';

const [state, dispatch] = useReducer(reducer, initialState);

dispatch関数の役割


dispatch関数は、アクションをReducer関数に送信し、状態を更新します。

アクションの送信例:

dispatch({ type: 'INCREMENT' }); // カウントを増加
dispatch({ type: 'DECREMENT' }); // カウントを減少

初期設定の統合コード


以下は、Reducer関数、初期状態、useReducer の全てを統合したコード例です。

import React, { useReducer } from 'react';

// Reducer関数
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// 初期状態
const initialState = { count: 0 };

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>カウント: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>増加</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>減少</button>
    </div>
  );
}

export default App;

ポイントのまとめ

  • Reducer関数: 状態変更ロジックを一元管理。
  • 初期状態: アプリケーションの開始時に必要なデフォルト値を指定。
  • dispatch関数: 状態を変更するためのアクションをReducerに送信。

これらの初期設定を正しく行うことで、アプリケーションの状態管理が簡潔で効果的になります。

状態管理を親子コンポーネントに適用

useReducerを活用して親コンポーネントで状態を管理し、それを子コンポーネントに適用する方法を解説します。この手法は、状態とその変更を一元管理しながら、アプリケーションの可読性と保守性を高めるのに役立ちます。

親コンポーネントでの状態管理

親コンポーネントでは、useReducerを使用して状態を管理します。以下のコードでは、カウント状態とその更新ロジックをReducer関数で定義し、親コンポーネントで管理しています。

import React, { useReducer } from 'react';

// Reducer関数
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 初期状態
const initialState = { count: 0 };

function ParentComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>親コンポーネント</h1>
      <p>カウント: {state.count}</p>
      <ChildComponent count={state.count} dispatch={dispatch} />
    </div>
  );
}

ポイント:

  1. useReducer で状態 (state) と dispatch 関数を生成。
  2. state.count を親コンポーネントで表示。
  3. 子コンポーネントに count と dispatch を渡して管理を分担。

子コンポーネントでの状態利用

子コンポーネントでは、親コンポーネントから受け取った状態 (count) と dispatch 関数を使用します。状態を表示したり、更新操作を行うボタンを配置します。

function ChildComponent({ count, dispatch }) {
  return (
    <div>
      <h2>子コンポーネント</h2>
      <p>受け取ったカウント: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>増加</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>減少</button>
    </div>
  );
}

ポイント:

  1. 親から渡された count を利用してカウントを表示。
  2. dispatch 関数を利用して、状態を直接変更可能。

親子コンポーネント間での状態管理の流れ

  1. 親コンポーネントで状態と更新ロジックを管理
  • Reducer関数で状態変更ロジックを定義。
  • useReducer を利用して状態と dispatch 関数を生成。
  1. 子コンポーネントへの状態と関数の共有
  • 親コンポーネントから子コンポーネントに state と dispatch をプロパティとして渡す。
  1. 子コンポーネントからの状態変更
  • 子コンポーネントで受け取った dispatch を利用し、親コンポーネントの状態を変更。

統合コード

以下は、親子コンポーネント間でuseReducerを活用した状態管理の完全なコードです。

import React, { useReducer } from 'react';

// Reducer関数
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 初期状態
const initialState = { count: 0 };

// 親コンポーネント
function ParentComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>親コンポーネント</h1>
      <p>カウント: {state.count}</p>
      <ChildComponent count={state.count} dispatch={dispatch} />
    </div>
  );
}

// 子コンポーネント
function ChildComponent({ count, dispatch }) {
  return (
    <div>
      <h2>子コンポーネント</h2>
      <p>受け取ったカウント: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>増加</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>減少</button>
    </div>
  );
}

export default ParentComponent;

まとめ

この構成により、状態管理が親コンポーネントに一元化され、親子コンポーネント間でのデータの受け渡しがスムーズに行われます。特に複雑な状態管理が必要な場合、この手法は効率的かつ分かりやすいコードの実現に寄与します。

状態の変更と子コンポーネントへの伝達

useReducerを利用して、親コンポーネントで管理する状態を変更し、その変更を子コンポーネントに伝達する仕組みを具体的に解説します。

状態変更の仕組み

状態の変更は以下の流れで行われます：

  1. 子コンポーネントで dispatch 関数を呼び出し、アクションを送信。
  2. 親コンポーネントのReducer関数がアクションを受け取り、新しい状態を生成。
  3. 親コンポーネントが再レンダリングされ、新しい状態が子コンポーネントに渡される。

コード例: 状態変更と伝達

以下のコード例では、親コンポーネントが状態を管理し、子コンポーネントがその状態を変更します。

import React, { useReducer } from 'react';

// Reducer関数
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 初期状態
const initialState = { count: 0 };

// 親コンポーネント
function ParentComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>親コンポーネント</h1>
      <p>カウント: {state.count}</p>
      <ChildComponent count={state.count} dispatch={dispatch} />
    </div>
  );
}

// 子コンポーネント
function ChildComponent({ count, dispatch }) {
  return (
    <div>
      <h2>子コンポーネント</h2>
      <p>受け取ったカウント: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>増加</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>減少</button>
    </div>
  );
}

export default ParentComponent;

詳細解説

  1. dispatch関数の呼び出し
    子コンポーネントでは、dispatch 関数を呼び出し、状態変更のためのアクションを送信します。
   dispatch({ type: 'INCREMENT' });
  1. Reducer関数の実行
    アクションを受け取ったReducer関数は、現在の状態 (state) を基に新しい状態を計算し、親コンポーネントに返します。
   switch (action.type) {
     case 'INCREMENT':
       return { ...state, count: state.count + 1 };
   }
  1. 新しい状態の伝達
    親コンポーネントが再レンダリングされ、新しい状態が子コンポーネントにプロパティとして渡されます。
   <ChildComponent count={state.count} dispatch={dispatch} />

再レンダリングの注意点

useReducerを使用する場合、親コンポーネントが再レンダリングされると、その子コンポーネントも再レンダリングされます。これを防ぐには、React.memo を使用して子コンポーネントの不要な再レンダリングを防ぎます。

例: React.memoの使用

const ChildComponent = React.memo(({ count, dispatch }) => {
  return (
    <div>
      <h2>子コンポーネント</h2>
      <p>受け取ったカウント: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>増加</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>減少</button>
    </div>
  );
});

まとめ

  • 子コンポーネントが dispatch 関数を使い、親の状態を変更する。
  • 新しい状態は親コンポーネントで再計算され、子コンポーネントに伝達される。
  • 再レンダリングの最適化を考慮し、React.memo を必要に応じて使用する。

この仕組みにより、状態変更と伝達が効率的に行われ、Reactアプリケーションがスムーズに動作します。

状態管理のベストプラクティス

useReducerを利用して親子コンポーネント間の状態管理を効率的に行うためには、いくつかのベストプラクティスを押さえることが重要です。これにより、コードの保守性や可読性が向上し、バグを防ぐことができます。

Reducer関数を簡潔かつ明確に保つ

Reducer関数は状態管理のロジックを集中管理する重要な要素です。この関数が複雑になると、理解やメンテナンスが難しくなります。以下のポイントに注意してReducer関数を設計しましょう：

  1. アクションタイプの定義を分離
    アクションタイプを文字列の直接指定から定数化し、分離することで一貫性と可読性を向上させます。
   const ACTIONS = {
     INCREMENT: 'INCREMENT',
     DECREMENT: 'DECREMENT',
   };

   function reducer(state, action) {
     switch (action.type) {
       case ACTIONS.INCREMENT:
         return { ...state, count: state.count + 1 };
       case ACTIONS.DECREMENT:
         return { ...state, count: state.count - 1 };
       default:
         return state;
     }
   }
  1. 純粋関数であることを維持
    副作用をReducer関数に含めないようにし、状態更新だけに専念させます。副作用は、useEffect など他のReactフックで処理します。

状態の初期値を柔軟に設定

状態の初期値をコード内にハードコーディングするのではなく、関数や外部データから生成するようにすると柔軟性が高まります。

const initialState = () => ({
  count: 0,
  isActive: false,
});
const [state, dispatch] = useReducer(reducer, undefined, initialState);

状態管理のスコープを適切に設定

useReducerは、必要なコンポーネントでのみ使用するべきです。状態管理が複数のコンポーネントで共有される場合、Context API を組み合わせることで状態管理を適切にスコープ化できます。

Context APIとの組み合わせ例:

const StateContext = React.createContext();

function ParentComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <StateContext.Provider value={{ state, dispatch }}>
      <ChildComponent />
    </StateContext.Provider>
  );
}

function ChildComponent() {
  const { state, dispatch } = React.useContext(StateContext);
  return (
    <div>
      <p>カウント: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>増加</button>
    </div>
  );
}

不要な再レンダリングを防ぐ

親コンポーネントの状態が更新されると、通常はすべての子コンポーネントが再レンダリングされます。これを防ぐには以下の方法を採用します：

  1. React.memoの利用
    子コンポーネントを React.memo でラップすることで、再レンダリングを最小化します。
   const ChildComponent = React.memo(({ count, dispatch }) => {
     return <p>カウント: {count}</p>;
   });
  1. プロパティの最小化
    必要なプロパティのみを子コンポーネントに渡すことで、変更の影響範囲を限定します。

デバッグツールを活用する

状態管理のデバッグには、React DevToolsやロギングを活用します：

  • console.log(action) をReducer内に挿入してアクションを確認。
  • 状態のスナップショットを保存して変更を追跡。

モジュール化による可読性の向上

状態管理をモジュール化し、Reducer関数やアクションタイプ、初期状態を別ファイルに分離することで、コードの可読性を高めます。

例: モジュール化

// reducer.js
export const ACTIONS = { INCREMENT: 'INCREMENT', DECREMENT: 'DECREMENT' };

export const initialState = { count: 0 };

export function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.INCREMENT:
      return { ...state, count: state.count + 1 };
    case ACTIONS.DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

まとめ

  • Reducer関数は簡潔かつ純粋に保つ。
  • 初期状態やアクションタイプを柔軟に設計する。
  • Context APIを組み合わせてスコープを管理する。
  • 再レンダリングを最小化する工夫を取り入れる。
  • デバッグツールやモジュール化を活用して可読性を向上させる。

これらのベストプラクティスを適用することで、useReducerを利用した状態管理がより効率的かつ堅牢になります。

応用例：複雑なフォーム管理

useReducerを活用すると、複数の入力フィールドを持つ複雑なフォームの状態管理が簡単になります。以下では、フォーム全体の状態を一元的に管理し、入力のバリデーションやエラー表示を組み込んだ例を紹介します。

フォームの要件

  • ユーザーの名前、メールアドレス、パスワードの入力を管理。
  • 入力フィールドの変更時に状態を更新。
  • バリデーションエラーを表示。
  • 送信時に全入力をチェック。

Reducer関数の定義


Reducer関数を利用して、フォームの状態とエラーを管理します。各入力フィールドが異なるアクションで更新されます。

const ACTIONS = {
  UPDATE_FIELD: 'UPDATE_FIELD',
  VALIDATE: 'VALIDATE',
  RESET: 'RESET',
};

const initialState = {
  values: {
    name: '',
    email: '',
    password: '',
  },
  errors: {
    name: null,
    email: null,
    password: null,
  },
};

function reducer(state, action) {
  switch (action.type) {
    case ACTIONS.UPDATE_FIELD:
      return {
        ...state,
        values: {
          ...state.values,
          [action.payload.name]: action.payload.value,
        },
      };
    case ACTIONS.VALIDATE:
      return {
        ...state,
        errors: action.payload.errors,
      };
    case ACTIONS.RESET:
      return initialState;
    default:
      return state;
  }
}

フォームコンポーネントの実装

useReducerを利用してフォーム全体の状態とエラーを管理します。

import React, { useReducer } from 'react';

const validate = (values) => {
  const errors = {};
  if (!values.name) errors.name = '名前は必須です';
  if (!values.email || !/\S+@\S+\.\S+/.test(values.email)) errors.email = '正しいメールアドレスを入力してください';
  if (values.password.length < 6) errors.password = 'パスワードは6文字以上である必要があります';
  return errors;
};

function FormComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleChange = (e) => {
    const { name, value } = e.target;
    dispatch({ type: ACTIONS.UPDATE_FIELD, payload: { name, value } });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errors = validate(state.values);
    if (Object.keys(errors).length === 0) {
      alert('フォーム送信成功！');
      dispatch({ type: ACTIONS.RESET });
    } else {
      dispatch({ type: ACTIONS.VALIDATE, payload: { errors } });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>名前:</label>
        <input
          type="text"
          name="name"
          value={state.values.name}
          onChange={handleChange}
        />
        {state.errors.name && <p style={{ color: 'red' }}>{state.errors.name}</p>}
      </div>
      <div>
        <label>メール:</label>
        <input
          type="email"
          name="email"
          value={state.values.email}
          onChange={handleChange}
        />
        {state.errors.email && <p style={{ color: 'red' }}>{state.errors.email}</p>}
      </div>
      <div>
        <label>パスワード:</label>
        <input
          type="password"
          name="password"
          value={state.values.password}
          onChange={handleChange}
        />
        {state.errors.password && <p style={{ color: 'red' }}>{state.errors.password}</p>}
      </div>
      <button type="submit">送信</button>
    </form>
  );
}

export default FormComponent;

解説

  1. 状態の管理
  • フォームの入力値 (values) とエラーメッセージ (errors) をReducer関数で一元管理。
  • 入力フィールドの変更を UPDATE_FIELD アクションで処理。
  1. バリデーションの実装
  • validate 関数で各フィールドの値をチェックし、エラーがある場合は VALIDATE アクションでエラーを状態に反映。
  1. リセット機能
  • フォーム送信後、RESET アクションで状態を初期化。

状態管理のポイント

  • スケーラブルなデザイン
    フォームフィールドが増えてもReducer関数で一括管理できるため、メンテナンスが容易。
  • リアルタイムエラーチェック
    バリデーションをフィールドごとに追加し、リアルタイムにエラーを表示する拡張も可能。
  • ユーザーフィードバック
    入力エラーを視覚的に表示し、ユーザーの入力体験を向上。

まとめ


useReducerを利用することで、複雑なフォーム管理をシンプルに実装でき、状態とロジックを整理して一元管理できます。バリデーションやエラーメッセージの処理も容易に行え、ユーザーにとって直感的で使いやすいフォームが作成可能です。

まとめ

本記事では、ReactにおけるuseReducerを活用した親子コンポーネント間の複雑な状態管理の方法を解説しました。useReducerの基本的な仕組みから、親子間での適用方法、ベストプラクティス、そして応用例として複雑なフォーム管理の実装まで、実践的な内容を紹介しました。

useReducerは、状態が複雑化する場面で非常に有用であり、Reduxほどの導入コストをかけずに堅牢な状態管理を実現します。この記事を参考に、useReducerを効果的に活用し、アプリケーション開発をさらにスムーズに進めてください。

React
React 状態管理 親子コンポーネント useReducer

コメント

コメントする

目次