useAsyncEffect

useAsyncEffect は、React コンポーネントで非同期の副作用を扱うための React フックです。 useEffect と同じクリーンアップのパターンに従いながら、非同期処理を安全に扱います。

インターフェース

function useAsyncEffect(
  effect: () => Promise<void | (() => void)>,
  deps?: DependencyList
): void;

パラメータ

• effectrequired · () => Promise<void | (() => void)>
  

  useEffect と同じパターンで実行される非同期関数です。必要に応じてクリーンアップ関数を返せます。

• depsDependencyList
  

  依存配列です。配列内のいずれかの値が変わるたびに、エフェクトを再実行します。省略した場合は、コンポーネントがレンダリングされるたびに実行します。

戻り値

この関数は値を返しません。

使用例

useAsyncEffect(async () => {
  const data = await fetchData();
  setData(data);

  return () => {
    console.log('Cleanup on unmount or dependencies change');
  };
}, [dependencies]);