React Hooks 非同期処理解説
2024-10-10
React Hooksで状態の更新時に非同期コードを実行する
React Hooksを使用すると、コンポーネントの内部で状態を管理することができ、状態が更新されるとコンポーネントが再レンダリングされます。しかし、非同期操作（例えば、API呼び出しやタイマー）が関わる場合、状態の更新と非同期操作の完了のタイミングを適切に管理する必要があります。
useEffect Hookの使い方
この問題を解決するために、React HooksのuseEffectフックを使用します。useEffectフックは、コンポーネントのレンダリング後に副作用を実行するためのメカニズムを提供します。
import { useState, useEffect } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
// 非同期操作の実行
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// 状態の更新
setCount(data.count);
};
fetchData();
}, [count]);
return (
<div>
Count: {count}
</div>
);
}
useEffectフックの仕組み
- 依存配列の指定
useEffectフックの第2引数として、依存配列を指定します。この配列に含まれる値が変更されると、useEffectフック内のコードが再実行されます。 - 副作用の実行
useEffectフック内のコードが実行されます。このコード内で非同期操作や他の副作用を実行することができます。 - クリーンアップ
useEffectフックが再実行される前に、前回の実行時に設定されたクリーンアップ関数が実行されます。これは、例えば、タイマーをクリアしたり、リソースを解放したりするために使用されます。
注意点
- クリーンアップの適切な使用
必要に応じてクリーンアップ関数を設定して、リソースの解放や副作用のキャンセルを行うことができます。 - 非同期操作の管理
非同期操作の完了後に状態を更新することで、コンポーネントの再レンダリングをトリガーすることができます。 - 無限ループ防止
useEffectフック内のコードが状態を更新すると、コンポーネントが再レンダリングされ、useEffectフックが再び実行されます。これを防ぐために、依存配列を適切に管理する必要があります。
import { useState, useEffect } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
// 非同期操作の実行
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// 状態の更新
setCount(data.count);
};
fetchData();
}, [count]);
return (
<div>
Count: {count}
</div>
);
}
useCallbackフックと依存配列の管理
useCallbackフックを使用して、非同期関数をメモ化し、再レンダリング時に再作成されないようにすることができます。これにより、依存配列の管理が簡素化されます。
import { useState, useEffect, useCallback } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const fetchData = useCallback(async () => {
// 非同期操作の実行
const response = await fetch('https://api.example.com/data');
const data = await response.json();
// 状態の更新
setCount(data.count);
}, []);
useEffect(() => {
fetchData();
}, [fetchData]);
return (
<div>
Count: {count}
</div>
);
}
useReducerフックとアクション
useReducerフックを使用して、状態の管理と更新をより複雑なロジックで処理することができます。アクションを定義し、useReducerフックを使用して状態を更新することで、非同期操作の管理を簡素化することができます。
import { useReducer } from 'react';
function MyComponent() {
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case ' FETCH_DATA_SUCCESS':
return { ...state, count: action.payload };
default:
return state;
}
};
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data.count });
};
fetchData();
}, []);
return (
<div>
Count: {state.count}
</div>
);
}
カスタムフックの使用
カスタムフックを作成して、非同期操作のロジックをカプセル化することができます。これにより、コードの再利用性と保守性を向上させることができます。
import { useState, useEffect } from 'react';
function useFetchData() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
co nst fetchData = async () => {
setLoading(true);
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
} catch (error) {
setErr or(error);
} finally {
setLoading(false);
}
};
fetchDa ta();
}, []);
return { data, loading, error };
}
function MyComponent() {
const { data, loading, error } = useFetchData();
return (
<div>
{loading ? 'Loading...' : (error ? 'Error' : `Count: ${data.count}`)}
</div>
);
}
javascript reactjs callback
