【React】アリババが開発してる便利hooksライブラリ「ahooks」のuseAsyncEffectを試してみた

概要

Alibaba Cloudでお馴染みのアリババが、Reactの便利hooksライブラリahooksを開発しているのを発見しました。ドキュメントで紹介されている通り、かなりの数の便利hooksが用意されていて使えそうなのがある印象です。
今回はこの中で「useAsyncEffect」を試してみました。

useAsyncEffectについて

useEffectの中で非同期処理を呼ぼうとするとuseEffectに非同期関数を設定する方法の記事にあるように、関数内で非同期関数を実行する必要があります。もちろんこの実装でも良いのですが、ahooksのuseAsyncEffectを使用すると非同期関数をそのまま設定できます。

前提

• 使用したahooksのバージョンは3.7.11です。

実装サンプル

実装サンプルとして、localStorageで管理している認証トークンが変わったら、非同期処理が走るような実装をuseAsyncEffectを使用して以下の通り書いてみました。

export function AuthProvider({ children }: React.PropsWithChildren) {
  // 以下は独自で作成したhooks
  const { authToken, removeAuthToken } = useAuthTokenLocalStorage();
  const { setAuthInfo } = useAuthManagement();
  const { getUser, loading } = useGetUserLazyQuery();

  // ahooksのuseAsyncEffect
  useAsyncEffect(async () => {
    if (authToken) {
	  // 非同期処理
      const response = await getUser(authToken);
      if (response.data?.user) {
        setAuthInfo(response.data.user);
      } else {
        removeAuthToken();
      }
    }
  }, [authToken]);

  return (
    <>
      {!loading && children}
      {loading && <LoadingSpinner />}
    </>
  );
}