useEffectでasyncを使うと「destroy is not a function」エラーが発生する場合の対処方法

はじめに

ReactでuseEffectを使用する場合によくやってしまう問題について紹介します。 それは、useEffectで非同期関数を使用したい場合にasyncの設定方法を間違えてしまいます。

一見、問題なさそうな下記のコード・・・

useEffect(async () => {
  // 処理
}, []);

実行すると下記のエラーが発生してWebページが表示されません。なぜ・・・。
どうやらこの書き方ではうまくいかないようです。

Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22932:1)
    at commitHookEffectListUnmount (react-dom.development.js:23100:1)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:25098:1)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:25048:1)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24956:1)
    at commitPassiveUnmountEffects (react-dom.development.js:24941:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27038:1)
    at flushPassiveEffects (react-dom.development.js:26984:1)
    at react-dom.development.js:26769:1
    at workLoop (scheduler.development.js:266:1)

useEffectで非同期関数を使う

useEffectでasyncを正しく設定するには下記のように即時関数でワンクッション置く必要がありました。解決方法が分かってしまえば簡単でしたね。

useEffect(() => {
  (async function () {
    // 処理
  })();
}, []);