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

useEffectで非同期関数を設定する際に落とし穴にハマったのでメモっておきます。

非同期関数をuseEffectに設定するとエラーになる

useEffectフックで非同期関数を実行したい場合、以下のように設定するとエラーになります。

useEffect(async () => {
    const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=AWS");
    const data = await response.json();
    console.log(data);
  },[]);

なぜ非同期関数をセットするとエラーになるのか？

なぜ、エラーになるのかというとuseEffectの第1引数の関数の戻り値にはクリーンアップ関数を設定する必要があるためです。

asyncを使って非同期関数にするとPromise型が戻り値として設定されるのでエラーとなります。

useEffectで非同期関数を呼び出す方法

なので、正しくは関数内で非同期関数を実行する必要があるのです。

useEffect(() => {
    (async() => {
      const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=AWS");
      const data = await response.json();
      alert(data.totalItems);
    })()
  }, []);

もしくは定数を定義して呼び出す方法があります。

useEffect(() => {
    const data = async() => {
      const response = await fetch("https://www.googleapis.com/books/v1/volumes?q=AWS");
      const data = await response.json();
      alert(data.totalItems);
    }
    data()
  }, []);

まとめ

• useEffectの第1引数の関数の戻り値にはクリーンアップ関数を設定する
• 非同期関数を設定すると戻り値がPromise型なのでエラーとなる
• 関数の中で非同期関数を定義して呼び出す必要がある