React Suspenseとは？初心者でもわかるしくみと実装のポイント

Reactで開発を進めていると、画面の表示が遅い場面に悩むことがあるのではないでしょうか。

そんなときに役立つのが React Suspense です。

この仕組みを使うと、ユーザーにスムーズな画面切り替えを提供できます。

初心者でも理解しやすい言葉で React Suspense の概要や実装方法を解説していきます。

実務で使うときにどんなメリットがあるのか、気になるポイントもあわせて見ていきましょう。

ここではコード分割や非同期データの読み込みを例に、実装のポイントをわかりやすく紹介します。

一つひとつ段階を踏んで確認していきましょう。

React Suspenseとは何か

Reactはコンポーネントのレンダリングを細かくコントロールできるのが特徴です。

その中でも Suspense は、コンポーネントが準備できるまでの待ち時間をうまく扱う機能として登場しました。

では、なぜ待ち時間を気にする必要があるのでしょうか。

たとえば、サーバーからデータを取得するときはどうしても時間がかかることがあります。

画面が白いままだと、利用者は「フリーズしたのかな」と感じてしまいやすいです。

Suspenseを使うと、データの読み込みが終わるまで「ローディング画面」を表示したり、段階的にUIを更新したりと、開発者が意図したコントロールをしやすくなります。

特にReactの最新バージョンでは、このSuspenseをより幅広いシーンで使えるようになっています。

非同期処理を管理するときの感覚がシンプルになり、コードの見通しもよくなります。

実装を理解するためには、まずSuspenseが「読み込み中に別のUIを出す仕組み」であることを押さえるとよいでしょう。

React Suspenseの基本的な仕組み

React Suspenseは、コンポーネントが外部リソースを読み込む際の状態を把握して、表示を一時的に「保留」させることを可能にします。

具体的には「データが取得できるまで待機するコンポーネント」と「待っている間のフォールバックUI」を切り替える構造です。

たとえば、以下のようにSuspenseを用意し、内部で非同期処理を行うコンポーネントをラップします。

コピー
import React, { Suspense } from "react";
import MyAsyncComponent from "./MyAsyncComponent";

function App() {
  return (
    <Suspense fallback={<div>読み込み中です...</div>}>
      <MyAsyncComponent />
    </Suspense>
  );
}

export default App;

この例では fallback プロパティにローディング表示を定義しています。

読み込みが完了するまで、ユーザーには「読み込み中です...」というテキストが表示される仕組みです。

ここで重要なのは、MyAsyncComponent内で非同期処理の完了をReactが把握できるようになっている点です。

従来の方法だと、コンポーネント内部でuseEffectや状態管理を使ってローディング表示を切り替える必要がありました。

しかしSuspenseでは、Reactが「このコンポーネントはまだデータを取得しているな」と判断した時点で、fallbackを表示してくれるようになります。

ただし、Suspenseは全自動で非同期処理を肩代わりするわけではありません。

後述する特別な読み込み関数やライブラリの仕組みが組み合わさって「保留と再レンダリング」が成り立つという点も押さえておきましょう。

非同期データの読み込みとSuspense

React Suspenseが真価を発揮するのは、コンポーネントがデータを取得している間のUI制御です。

これには「Concurrent Features」という概念が関係しており、複数の状態を同時に扱いながらユーザーに負担をかけない工夫が施されています。

とはいえ、初心者がReact Suspenseに入門するときには、まず「ローディングUIを簡潔に差し替えられる」ことを知れば十分です。

たとえば次のようなパターンがあります。

コピー
import React, { Suspense } from "react";

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("サーバーから取得したデータです");
    }, 2000);
  });
};

function DataLoader() {
  // 非同期処理が終わる前はエラーのように見えるかもしれませんが、
  // Suspense対応の仕組みによってこのコンポーネントがまだ描画されない状態にできます。
  const data = fetchDataAndThrowIfPending();
  return <div>{data}</div>;
}

function fetchDataAndThrowIfPending() {
  const promise = fetchData();
  // ここでReactが捕捉できるような仕組みで例外を投げるなどの実装を行うイメージです
  throw promise;
}

function App() {
  return (
    <Suspense fallback={<div>ロード中です...</div>}>
      <DataLoader />
    </Suspense>
  );
}

export default App;

上記は一例ですが、コンポーネント内でデータを読み込むときに「まだデータが完了していない」状態をReactに通知し、Reactがそれを検知してローディングUIを出すイメージです。

初心者の方が見ると、throw promiseと書く発想が少し衝撃的かもしれませんね。

Suspenseの内部では例外としてPromiseを投げるというトリッキーな方法で「レンダリングを一時的に止めている」わけです。

実際の実務では、この例をそのままコピペするというよりも、Reactコミュニティが提供している便利な仕組みと組み合わせることが多いでしょう。

それでも基本的な考え方として、Suspenseが「描画保留とローディングUI切り替え」を統合的に扱う手段であることがわかるかと思います。

コード分割とSuspense

React Suspense はデータ読み込みだけでなく、コード分割にも利用できます。

アプリケーションが大きくなると、全ファイルを一度に読み込むと読み込み時間が長くなるかもしれません。

そこでReactの機能である React.lazy を活用することで、特定のコンポーネントだけ遅延読み込みする仕組みを作ることができます。

次の例では、MyHeavyComponent という大きめのコンポーネントを遅延読み込みするイメージです。

コピー
import React, { Suspense, lazy } from "react";

const MyHeavyComponent = lazy(() => import("./MyHeavyComponent"));

function App() {
  return (
    <Suspense fallback={<div>コンポーネントを読み込み中...</div>}>
      <MyHeavyComponent />
    </Suspense>
  );
}

export default App;

React.lazy でインポートする形に書きかえると、必要なタイミングでだけ MyHeavyComponent.js を読み込むようになります。

初回表示の時間を短縮できるため、ユーザー体験が向上しやすいです。

最終的にまとめてビルドはされますが、WebpackやViteなどのビルドツールと組み合わせることで「利用されるまでダウンロードしない」ように工夫が行われます。

実務では、ページ分割や特定の機能単位でのコード分割に有用なので、パフォーマンスに敏感なプロジェクトでは重宝されています。

実践例：コンポーネントでの利用方法

ここでは、もう少し現場での使い方をイメージしやすいように、コンポーネントの例を紹介します。

アプリの中で「ユーザープロファイル」を表示するページがあると想定してみましょう。

以下のように、UserProfile コンポーネントで非同期データを取得しつつ、一部のコンポーネントを遅延読み込みするケースを考えます。

コピー
import React, { Suspense, lazy } from "react";

const UserDetail = lazy(() => import("./UserDetail"));

function fetchUserData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        name: "Tanaka",
        age: 30,
        city: "Tokyo"
      });
    }, 1500);
  });
}

function UserProfile() {
  // データ取得を開始
  const dataPromise = fetchUserDataAndThrowIfPending();
  return (
    <div>
      <h2>ユーザープロファイル</h2>
      <p>名前: {dataPromise.name}</p>
      <p>年齢: {dataPromise.age}</p>
      <p>都市: {dataPromise.city}</p>
      <Suspense fallback={<div>詳細コンポーネントを読み込み中...</div>}>
        <UserDetail user={dataPromise} />
      </Suspense>
    </div>
  );
}

function fetchUserDataAndThrowIfPending() {
  const promise = fetchUserData();
  throw promise;
}

export default UserProfile;

読み込みが終わるまでの間は、Suspense の fallback で「詳細コンポーネントを読み込み中...」と表示されています。

UserDetail も別ファイルに切り出してあり、コード分割が行われている状態です。

一方で、ユーザーデータ自体も非同期で取得しながら表示しているので、データの読み込みが間に合わない場合はローディングUIを出します。

このように複数段階の遅延読み込みや非同期処理を組み合わせることで、ユーザーへの表示をスムーズにコントロールできます。

実際の開発現場でも、同期的に見えるコードの裏でPromiseを投げている部分をチームメンバーが把握していないと、意図せぬバグが発生することがあります。

実務における活用シーン

React Suspense は、読み込みが長引く可能性のある箇所で積極的に使われています。

以下のようなシーンでは特に効果的でしょう。

ネットワークを介したデータ取得

バックエンドAPIやクラウドサービスからデータを引っ張ってくるケースでは、どうしても通信遅延が発生します。

Suspenseを使ってローディング状態を明示することで、ユーザーにわかりやすい画面を提供できます。

大規模コンポーネントの遅延読み込み

ユーザーが必要とする機能だけをあとから読み込むと、最初のページ表示が軽くなります。

初期表示が遅いと離脱率が高まる可能性もあるので、コード分割によるパフォーマンス向上は見逃せません。

フォーム送信や画像読み込み

ユーザーが入力した内容を送信した後、処理が終わるまで待っている間にもSuspenseの考え方は生かせます。

ただし、フォーム送信は単純なローディング表示で十分なことも多いので、わざわざSuspenseを使うほどではない場合もあります。

よくある質問と注意点

Suspenseの活用にあたっては、いくつかの疑問や注意点があります。

他のライブラリとの組み合わせ

React SuspenseはPromiseを投げるスタイルを前提としています。

したがって、外部ライブラリと組み合わせる場合は、そのライブラリがSuspenseに対応しているか確認しておくとよいでしょう。

React Queryなどは独自の方法でローディング表示を制御するため、Suspenseの仕組みと一緒に使うときは設定を見直す必要があります。

エラー処理やエラーバウンダリ

非同期処理は成功だけでなく失敗の可能性もあるので、エラーバウンダリとの組み合わせを考えるとより丁寧です。

Suspenseはローディング状態の制御がメイン機能ですが、エラー時のUI制御も組み合わせないとユーザーの混乱を招きがちです。

すべてをSuspenseで包むべきか

あまりにも多くの箇所をSuspenseで包んでしまうと、かえってローディングUIが乱立して煩雑になりがちです。

大きなコンポーネント単位や主要なデータ取得部分に絞って使うなど、プロジェクトの規模や要件に合わせて最適化するのが無難です。

まとめ

React Suspense は、非同期処理やコード分割を見通しよく実装するための頼もしい仕組みです。

データ取得中にUIを保留させるだけでなく、ローディング表示をユーザーにわかりやすく提示できます。

コンポーネントごとに細かく制御できるため、大きなアプリケーションであってもパフォーマンスと利便性を両立しやすいです。

一方で、Promiseを投げる実装やエラー処理など、従来の書き方とは違った設計に注意が必要です。

まずは小さなコンポーネントから導入し、徐々に範囲を広げながら慣れていくとよいのではないでしょうか。