【React】useEffectでasyncを使うとエラー？正しい書き方と解決方法

はじめに

useEffectでasyncを使おうとした際にうまく動作しなかったため、その原因と正しい使い方について調べました。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

事象

useEffectで非同期関数を実行しようと、以下のようなコードを書きましたが、正常にデータを取得できませんでした。

useEffect(async () => {
    const data = await fetchData(import.meta.env.VITE_ISSUE_ID);
    console.log(data);
  },[]);

原因

useEffectのコールバック関数はPromiseを返してしまうと、Reactがそれを正しく処理できず、エラーが発生します。useEffectのコールバック関数はクリーンアップ関数を返す必要があり、直接asyncを付けることができません。

解決方法

asyncをuseEffectのコールバック関数につけるのではなく、内部でasync関数を定義して実行することで、正常にデータを取得できました。

useEffect(() => {
  const fetchDataAsync = async () => {
    const data = await fetchData(import.meta.env.VITE_ISSUE_ID);
    console.log(data);
  };

  fetchDataAsync();
}, []);

終わりに

今回のエラーを通じて、非同期処理についての理解が不十分であることを実感しました。今後は async/awaitの仕組みやPromiseの動作をより深く理解し、適切なコードを書けるようにしていきたいと思います

参考

『useEffectに非同期関数を設定する方法』Zenn

『useEffectで非同期処理(async/ await)する際の注意点』Qiita