React Hooksでスマートにリセット！useState、useReducer、useRefの使い分け

2024-05-23

React Hooks で初期状態にリセットする方法

useState フックは、コンポーネント内でステートを管理するための最も基本的なフックです。初期値と更新関数を返すステートオブジェクトを返します。ステートを初期状態にリセットするには、更新関数を以下の様に使うことができます。

const [count, setCount] = useState(0);

const resetCount = () => {
  setCount(0); // 初期値にリセット
};

この例では、count ステート変数は初期値として 0 に設定されています。resetCount 関数は setCount 関数を呼び出し、count ステートを 0 にリセットします。

useReducer フックは、より複雑なステートロジックを管理するのに役立ちます。ステートとアクションを処理する reducer 関数と、初期ステートを受け取ります。ステートを初期状態にリセットするには、以下の様に dispatch 関数を使い、RESET アクションを reducer に送ることができます。

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'RESET':
      return initialState;
    default:
      return state;
  }
};

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

const resetCount = () => {
  dispatch({ type: 'RESET' }); // RESET アクションを dispatch
};

この例では、state 変数は count プロパティを持つオブジェクトで、初期値として 0 に設定されています。reducer 関数は、RESET アクションを受け取った場合、ステートを initialState にリセットします。resetCount 関数は dispatch 関数を呼び出し、RESET アクションを reducer に送ります。

補足

上記以外にも、useContext や useMemo などのフックを使って、ステートをリセットする方法があります。
ステートをリセットするロジックは、コンポーネントのニーズに合わせて調整する必要があります。
パフォーマンスが重要な場合は、不要な再レンダリングを避けるために、useEffect フックと組み合わせてステートをリセットすることを検討してください。

React Hooks で初期状態にリセットするサンプルコード

useState フックを使用した例

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const resetCount = () => {
    setCount(0); // 初期値にリセット
  };

  return (
    <div>
      <p>カウント： {count}</p>
      <button onClick={resetCount}>リセット</button>
    </div>
  );
}

useReducer フックを使用した例

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'RESET':
      return initialState;
    default:
      return state;
  }
};

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

  const resetCount = () => {
    dispatch({ type: 'RESET' }); // RESET アクションを dispatch
  };

  return (
    <div>
      <p>カウント： {state.count}</p>
      <button onClick={resetCount}>リセット</button>
    </div>
  );
}

これらの例は、React Hooks でステートを初期状態にリセットする方法を理解するための出発点として役立ちます。具体的な実装は、コンポーネントのニーズに合わせて調整する必要があります。

React Hooks でステートを初期状態にリセットするその他の方法

useRef フックは、コンポーネント内でミュータブルな値を保持するために使用できます。ステートとは異なり、useRef で返される値はレンダリング間で保持されます。

import React, { useState, useRef } from 'react';

function MyComponent() {
  const initialState = { count: 0 };
  const countRef = useRef(initialState); // 初期値を保持

  const [count, setCount] = useState(countRef.current); // useRef から初期値を取得

  const resetCount = () => {
    setCountRef.current = initialState; // useRef を使って初期値にリセット
    setCount(initialState); // ステートを更新
  };

  return (
    <div>
      <p>カウント： {count}</p>
      <button onClick={resetCount}>リセット</button>
    </div>
  );
}

この例では、countRef という useRef 変数を使用して、count ステートの初期値を保持しています。MyComponent コンポーネントが最初にレンダリングされるとき、countRef.current は initialState に設定されます。その後、count ステートは countRef.current の値に初期化されます。resetCount 関数は、countRef.current を initialState に設定し、setCount を呼び出してステートを更新します。

useContext フックは、コンポーネントツリー全体で共有されるコンテキスト値にアクセスするために使用できます。ステートをグローバルに管理し、複数のコンポーネントからリセットできるようにするには、このフックが役立ちます。

import React, { useState, createContext } from 'react';

const MyContext = createContext(0); // 初期値を 0 に設定

function MyProvider({ children }) {
  const [count, setCount] = useState(0);

  const resetCount = () => {
    setCount(0);
  };

  return (
    <MyContext.Provider value={{ count, resetCount }}>
      {children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const { count, resetCount } = useContext(MyContext);

  return (
    <div>
      <p>カウント： {count}</p>
      <button onClick={resetCount}>リセット</button>
    </div>
  );
}

この例では、MyContext というコンテキストを作成し、初期値を 0 に設定します。MyProvider コンポーネントは count ステートと resetCount 関数をコンテキスト値として提供します。MyComponent コンポーネントは useContext フックを使用して、これらの値にアクセスできます。resetCount 関数は、MyProvider コンポーネントから提供されるものであり、コンテキスト内の count ステートをリセットするために使用できます。

カスタムフック

ステートのロジックが複雑な場合、または特定の再利用可能なリセット機能を作成したい場合は、カスタムフックを作成できます。カスタムフックは、他のフックを組み合わせたり、独自のロジックを追加したりして、ステート管理をカプセル化するのに役立ちます。

import React, { useState } from 'react';

function useResetCount(initialState) {
  const [count, setCount] = useState(initialState);

  const resetCount = () => {
    setCount(initialState);
  };

  return { count, resetCount };
}

function MyComponent() {
  const { count, resetCount } = useResetCount(0);

  return (
    <div>
      <p>カウント： {count}</p>
      <button onClick={resetCount}>リセット</button>
    </div>
  );
}