【async/await】useEffect内で非同期処理を行う方法を解説

ReactのuseEffectの中で、asyncを使った非同期処理を行うことは頻繁にあります。

その記述方法を2つ解説します。

よくあるエラー

まずよくあるエラーを紹介します。

関数で非同期を実現するには下記のように書きます。

const func = async () => {
  await someFunc();
};

これをそのままuseEffectの中に適用すると、func.apply is not a functionのようなエラーが発生します。

useEffect(async () => {
  await someFunc();
}, []);

これは、useEffectはクリーンアップ関数を返す必要があるためです。

上記のように書くと、Promiseが返ってしまうためエラーが発生します。

無名async関数を使う方法

無名async関数をuseEffectの中で使う方法はこちらです。

useEffect(() => {
  (async () => {
    await someFunc();
  })();
}, []);

変数に関数を代入して使う方法

もう一つは、変数に関数を代入して呼び出す方法です。

こちらも無名関数ですが、下記のコードのように呼び出して使います。

useEffect(() => {
  const f = async() => {
    await someFunc();
  };
  f();
}, []);

まとめ

今回のケースだけではないですが、useEffect内でstateの更新などを行う場合は、予期せぬ挙動をしたりしますので、クリーンアップ関数もしっかり理解をしておきましょう。

参考: https://ja.reactjs.org/docs/hooks-effect.html

最後に2つの方法をまとめます。

無名async関数

useEffect(() => {
  (async () => {
    await someFunc();
  })();
}, []);

代入してから呼び出し

useEffect(() => {
  const f = async() => {
    await someFunc();
  };
  f();
}, []);