先生と生徒の会話形式で理解しよう

生徒

「先生、useEffectの中で非同期処理をしたいときに、async/awaitを使う方法がよくわからないんです。」

先生

「確かに、初心者が最初につまずきやすいポイントです。useEffectの引数に直接asyncをつけることはできないので、正しい書き方を知っておく必要がありますよ。」

生徒

「直接asyncが使えないんですか？それならどうすればいいんでしょうか？」

先生

「安心してください。内部に非同期関数を作って呼び出す方法や、即時実行関数を使う方法がベストプラクティスとされています。それでは順番に見ていきましょう。」

1. useEffectの中でasync/awaitをそのまま使えない理由

ReactのuseEffectフックは、副作用（サーバーからのデータ取得やタイマーのセットなど）を処理するために使われます。しかしuseEffectの引数に渡す関数は同期処理である必要があります。もし直接asyncをつけると、その関数はPromiseを返してしまい、Reactが想定していない挙動になるのです。

つまり「使えない」のではなく「書き方を工夫する必要がある」ということです。初心者の方でも理解しやすく言い換えると、useEffectに渡す関数は「普通の箱」でないといけないのに、asyncをつけると「特別な箱」に変わってしまうので合わなくなる、というイメージです。

2. useEffectでasync/awaitを使う基本パターン

一般的な解決方法は、useEffectの中で新しくasync関数を定義し、その関数をすぐに呼び出すというパターンです。


import React, { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
      const json = await res.json();
      setData(json);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>記事タイトル</h1>
      {data ? <p>{data.title}</p> : <p>読み込み中...</p>}
    </div>
  );
}

export default App;

（画面に「記事タイトル」と表示され、サーバーから取得した記事のタイトルが表示されます。最初は「読み込み中...」と表示されます）

3. 即時実行関数を使う書き方

もう一つの方法は、(async () => { ... })()という書き方です。これは「その場で作ってその場で実行する非同期関数」で、シンプルに書きたい場合によく使われます。


useEffect(() => {
  (async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts/2");
    const json = await res.json();
    setData(json);
  })();
}, []);

この書き方は短くまとめられる反面、慣れないと読みづらいと感じるかもしれません。初心者の方はまず前の「async関数を定義して呼び出す方法」から練習すると理解しやすいです。