Next.js!asyncとawaitと入れ子に注意！

2023年12月24日

覚書です。

asyncの関数が呼ばれない事件が起きました。うっかりasyncの入れ子が原因。なるべく避けたいですかね。トラブルの原因です。コードはかなり複雑でしたが、GPT君による要約をめもとして残しておきます。

Contents

1 Next.js!asyncとawaitと入れ子に注意
- 1.1 NG
- 1.2 OK
2 Next.js!asyncとawaitと入れ子に注意(その2)
- 2.1 NG

Next.js!asyncとawaitと入れ子に注意

NG

function MyComponent() {
  useEffect(() => {
    // 直接入れ子のasync関数を定義・実行
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      // 何かの処理...
    }

    fetchData();
  }, []);
}

このコードの問題点は、useEffectがクリーンアップ機能を提供しないため、非同期処理が完了する前にコンポーネントがアンマウントされた場合、メモリリークや予期せぬ動作を引き起こす可能性があることです。

OK

function MyComponent() {
  // 非同期処理を外部関数として定義
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    // 何かの処理...
  }

  useEffect(() => {
    // useEffect内で非同期関数を呼び出す
    fetchData();
  }, []);
}

この方法では、非同期処理がuseEffectの外部で定義されるため、useEffectのクリーンアップ機能との相互作用による問題を避けることができます。

Next.js!asyncとawaitと入れ子に注意(その2)

NG

async function processImage() {
  const imgElement = document.getElementById('imageElement');

  if (imgElement.complete) {
    await processLoadedImage(imgElement);
  } else {
    imgElement.onload = async () => {
      await processLoadedImage(imgElement);
    };
  }
}

async function processLoadedImage(img) {
  console.log('Processing loaded image');
  // 画像に対する何らかの処理
}

// この関数を呼び出す
processImage();

このコードでは、processImage関数がimgElementが完全にロードされたかをチェックしています。もし既にロードされている場合、processLoadedImage関数を直接呼び出します。ロードされていない場合、onloadイベントハンドラー内でprocessLoadedImageを呼び出します。

問題は、onloadイベントハンドラー内のprocessLoadedImageの呼び出しが非同期に実行され、外側のprocessImage関数の実行フローとは独立している点です。これにより、画像がロードされるのを正しく待たずに処理が進行してしまう可能性があります。