ReactのuseEffectで複数の非同期処理を扱う方法！初心者でもわかるベストプラクティス

1. 非同期処理とは？

1. 非同期処理とは？

非同期処理とは「終わるまで待たずに進める処理」のことです。例えば友達にメールを送って返事を待たずに別の作業をするようなイメージです。Reactではfetchなどを使ってサーバーからデータを取ってくるときに非同期処理を使います。

一方で複数の非同期処理を同時に行う場合、「どの順番で終わるか分からない」という特徴があります。そこでPromise.allなどを使って「全部の処理が終わるまで待つ」という方法がよく使われます。

2. useEffectで非同期処理を書くときの注意

2. useEffectで非同期処理を書くときの注意

useEffectはコンポーネントが描画されたときに実行される関数ですが、直接asyncを付けることはできません。そのため、中で非同期関数を定義して呼び出す必要があります。

また、複数の非同期処理を扱うときには「途中でエラーが出たらどうするか」や「片方だけ失敗したときにどう表示するか」といった設計も大事です。初心者の方はまず基本のPromise.allを使った方法を覚えるのがおすすめです。

3. 複数のAPIを同時に呼び出す例

3. 複数のAPIを同時に呼び出す例

ここでは「ユーザー情報」と「投稿データ」を同時に取得して画面に表示する例を紹介します。

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

function MultiFetch() {
  const [user, setUser] = useState(null);
  const [post, setPost] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const [userRes, postRes] = await Promise.all([
          fetch("https://jsonplaceholder.typicode.com/users/1"),
          fetch("https://jsonplaceholder.typicode.com/posts/1")
        ]);
        const userData = await userRes.json();
        const postData = await postRes.json();
        setUser(userData);
        setPost(postData);
      } catch (error) {
        console.error("データの取得に失敗しました", error);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>{user ? user.name : "ユーザー読み込み中..."}</h1>
      <p>{post ? post.title : "投稿読み込み中..."}</p>
    </div>
  );
}

export default MultiFetch;

4. 処理を順番に実行したい場合

4. 処理を順番に実行したい場合

ときには「一つ目のAPIが終わってから二つ目を呼びたい」というケースもあります。例えばユーザーのIDを取得してから、そのIDを使って別のデータを取る場合です。そのときはawaitを順番に書くことで実現できます。

useEffect(() => {
  const fetchSequential = async () => {
    try {
      const userRes = await fetch("https://jsonplaceholder.typicode.com/users/1");
      const userData = await userRes.json();
      setUser(userData);

      const postRes = await fetch(
        `https://jsonplaceholder.typicode.com/posts/${userData.id}`
      );
      const postData = await postRes.json();
      setPost(postData);
    } catch (error) {
      console.error("順番に取得中にエラー", error);
    }
  };
  fetchSequential();
}, []);

このようにすれば、まずユーザー情報を取ってから、そのユーザーに関連する投稿を取得することができます。

5. 複数の非同期処理で気をつけること

5. 複数の非同期処理で気をつけること

• すべて成功しないと困る場合はPromise.allを使う
• 一部でも成功すればよい場合はPromise.allSettledを使う
• 長時間かかる処理ではローディング状態を管理する
• エラーが起きても画面が止まらないように工夫する

これらを意識すれば、初心者でも複数の非同期処理を安心して扱えるようになります。特にuseEffectの中では「開始」「成功」「失敗」の3つをセットで考えると分かりやすいです。

6. まとめとして覚えておきたい考え方

6. まとめとして覚えておきたい考え方

複数の非同期処理を扱うときのコツは「待つべきところは待つ」「並列にできるところは並列にする」という考え方です。これは日常生活にも似ています。例えば料理をするときに、炊飯器でご飯を炊きながらスープを作れば効率が良いですが、材料を切らないと始められない作業は順番にやる必要があります。

ReactのuseEffectも同じで、複数の非同期処理をどう組み合わせるかを考えることが大切です。

まとめ

まとめ

ReactとuseEffectで複数の非同期処理を扱う考え方の振り返り

ここまでの記事では、ReactにおけるuseEffectの基本的な役割から始まり、非同期処理とは何か、そして複数の非同期処理をどのように組み合わせて安全に扱うかについて学んできました。Reactでアプリケーションを作る上で、サーバーからデータを取得する処理は避けて通れません。ユーザー情報や投稿データ、設定情報など、画面を構成するためには多くのデータが必要になります。

特に実務や少し大きめのアプリケーションになると、APIを一つだけ呼び出すケースは少なくなり、複数のAPIを同時に呼び出したり、あるデータを元に次のデータを取得したりする場面が増えてきます。そのときに重要になるのが、非同期処理の理解とuseEffectの正しい使い方です。

Promiseと非同期処理を正しく理解する重要性

非同期処理は「処理が終わるのを待たずに次へ進む」という特徴を持っています。この性質を理解していないと、まだデータが取得できていないのに画面に表示しようとしてエラーが出たり、意図しない表示になったりします。そこでPromiseという仕組みを使い、「いつ処理が完了したのか」をプログラム側で把握できるようにします。

記事内で紹介したPromise.allは、複数の非同期処理をまとめて管理するための代表的な方法です。すべての処理が成功したときだけ次の処理に進むため、「どれか一つでも失敗したら困る」という場面に向いています。一方で、すべてが成功しなくても結果を確認したい場合には、Promise.allSettledのような方法もあります。このように目的に応じて使い分けることが、React開発ではとても大切です。

useEffectで非同期処理を書くときの実践ポイント

useEffectの中では直接asyncを使えないため、必ず内部で非同期関数を定義してから呼び出す、という書き方をする必要があります。この形は最初は少し回りくどく感じるかもしれませんが、Reactのルールとして覚えておくことで、後からコードを読んだときにも混乱しにくくなります。

また、複数の非同期処理を扱う場合には、ローディング状態の管理やエラー処理も重要です。読み込み中に何も表示されないと、ユーザーは「画面が止まったのかな」と不安になります。そのため「読み込み中」という表示を出したり、エラーが起きた場合には適切なメッセージを表示する工夫が必要です。

まとめとしてのサンプル構成イメージ

以下は、複数の非同期処理を扱うときに意識したい構成イメージの一例です。記事内で紹介した考え方を整理する目的として参考にしてください。

useEffect(() => {
  const loadData = async () => {
    try {
      // 複数のデータを同時に取得
      const [userRes, postRes] = await Promise.all([
        fetch("/api/user"),
        fetch("/api/post")
      ]);

      const userData = await userRes.json();
      const postData = await postRes.json();

      setUser(userData);
      setPost(postData);
    } catch (error) {
      console.error("データ取得中にエラーが発生しました", error);
    }
  };

  loadData();
}, []);

このように、処理の流れを整理して書くことで、後から見返したときにも理解しやすいコードになります。ReactやuseEffectは慣れてくると、自然と「ここは並列」「ここは順番」という判断ができるようになります。