React Hooks で状態リセット
2024-10-07
React Hooksで状態を初期状態に戻す
React Hooks を使用して、コンポーネントの状態を初期状態に戻す方法はいくつかあります。ここでは、その方法を日本語で説明します。
useState を使用して、状態を直接リセットする
import { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const handleReset = () => {
setCount(0); // 初期値である0に設定してリセット
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleReset}>リセット</button>
</div>
);
}
この方法では、useState で管理している状態の値を直接、初期値に設定することでリセットします。
useReducer を使用して、リセットアクションを定義する
import { useReducer } from 'react';
function MyComponent() {
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'RESET':
return initia lState; // 初期状態を返す
default:
throw new Error();
}
};
const [state, dispatch] = useReducer(reducer, initialState);
const handleReset = () => {
dispatch({ type: 'RESET' });
};
return (
<div>
<p>カウント: {state.count}</p>
<button onClick={handleReset}>リセット</button>
</div>
);
}
この方法では、useReducer を使用して状態の管理を行い、リセット用のアクションを定義します。リセットアクションが実行されると、reducer が初期状態を返します。
カスタムフックを使用して、リセット機能を抽象化する
import { useState } from 'react';
function useResettableState(initialValue) {
const [value, setValue] = useState(initialValue);
const reset = () => {
setValue(initialValue);
};
return [value, setValue, reset];
}
function MyComponent() {
const [count, setCount, resetCount] = useResettableState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={resetCount}>リセット</button>
</div>
);
}
この方法では、カスタムフックを作成してリセット機能を抽象化します。これにより、複数のコンポーネントで共通のリセットロジックを使用することができます。
React Hooks で状態リセットのコード解説
import { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const handleReset = () => {
setCount(0); // 初期値である0に設定してリセット
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleReset}>リセット</button>
</div>
);
}
- handleReset
リセットボタンがクリックされたときに実行される関数です。setCount(0)を呼び出して、countの値を初期値0に設定します。 - setCount
状態変数を更新するための関数です。 - useState
状態管理フックです。countという状態変数を初期値0で作成します。
import { useReducer } from 'react';
function MyComponent() {
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'RESET':
return initia lState; // 初期状態を返す
default:
throw new Error();
}
};
const [state, dispatch] = useReducer(reducer, initialState);
const handleReset = () => {
dispatch({ type: 'RESET' });
};
return (
<div>
<p>カウント: {state.count}</p>
<button onClick={handleReset}>リセット</button>
</div>
);
}
- handleReset
リセットボタンがクリックされたときに実行される関数です。dispatch({ type: 'RESET' })を呼び出して、リセットアクションをディスパッチします。 - dispatch
アクションをディスパッチするための関数です。 - reducer
状態の更新ロジックを定義する関数です。action.typeに応じて、状態を更新します。'RESET'アクションが実行された場合は、initialStateを返して状態をリセットします。 - useReducer
状態管理フックです。initialStateを初期状態として、reducerを使用して状態を管理します。
import { useState } from 'react';
function useResettableState(initialValue) {
const [value, setValue] = useState(initialValue);
const reset = () => {
setValue(initialValue);
};
return [value, setValue, reset];
}
function MyComponent() {
const [count, setCount, resetCount] = useResettableState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={resetCount}>リセット</button>
</div>
);
}
- MyComponent
カスタムフックを使用するコンポーネントです。useResettableStateを呼び出して、リセット可能な状態とリセット関数を取得します。 - reset
リセット関数を定義します。setValue(initialValue)を呼び出して、状態を初期値に戻します。 - useResettableState
カスタムフックです。initialValueを受け取り、リセット可能な状態とリセット関数を返します。
useEffect を使用して、副作用でリセットする
import { useState, useEffect } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const [resetCount, setResetCount] = useState(0);
useEffect(() => {
if (resetCount > 0) {
setCount(0);
}
}, [resetCount]);
const handleReset = () => {
setResetCount(resetCount + 1);
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleReset}>リセット</button>
</div>
);
}
この方法では、useEffect を使用して、resetCount の値が変更されたときに状態をリセットします。resetCount の値を変更することで、useEffect の依存関係が変化し、副作用が実行されます。
useContext を使用して、グローバルなリセット機能を提供する
import { createContext, useContext, useState } from 'react';
const ResetContext = createContext();
function ResetProvider({ children }) {
const [resetCount, setResetCount] = useState(0);
return (
<ResetContext.Provider value={{ resetCount, setResetCount }}>
{children}
</ResetContext.Provider>
);
}
function MyComponent() {
const { resetCount, setResetCount } = useContext(ResetContext);
useEffect(() => {
if (resetCount > 0) {
// 状態をリセットするロジック
}
}, [resetCount]);
const handleReset = () => {
setResetCount(resetCount + 1);
};
return (
<div>
{/* コンポーネントのレンダリング */}
</div>
);
}
この方法では、useContext を使用して、グローバルなリセット機能を提供します。ResetProvider コンポーネントでリセット用の状態を管理し、ResetContext を使用して子コンポーネントからアクセスします。
Redux や Zustand などの外部ライブラリを使用する
// Redux の例
import { useSelector, useDispatch } from 'react-redux';
function MyComponent() {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
c onst handleReset = () => {
dispatch({ type: 'RESET' });
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleReset}>リセット</button>
</div>
);
}
reactjs react-hooks
