[React]useEffectで「useEffect must not return anything ~ 」のエラーが出た

概要

useEffectを使用したコンポーネントのレンダリング時に次のエラーが発生。

useEffect must not return anything besides a function, which is used for clean-up.

エラーの意味

useEffect関数はcleanup関数をreturnします。
コンポーネントが破棄される際に実行される関数のことですね。

このエラーはuseEffect関数内でcleanup関数以外がreturnされた際に発生します。

原因

意図的にfunction以外をreturnしていたらエラーになりますが、今回はこちらのケースでした。

export default function MyComponent() {
  useEffect(async () => {
    // 初期表示読み込み
    // await axiosなどを行う...

  }, []);

お分かりいただけますか？
async関数は暗黙的にPromiseをreturnします。Promiseはcleanup関数ではないので、エラーになります。

解決方法

async処理は関数にして非同期で実行します。今回は即時関数を使用します。

export default function MyComponent() {
  useEffect(() => {
    (async () => {
      // 初期表示読み込み
      // await axiosなどを行う...
      
    })();
  }, []);

これでuseEffectのcleanup関数も定義できますし、初期表示の読み込み処理も行えますね！