🍓

React の Suspense でコンポーネントを遅延読み込みする

2025/04/20に公開

 Suspenseとは？React の Suspense は、非同期で読み込まれるコンポーネントやデータが「まだ準備できていない」ときに、代わりに表示するフォールバックUI（ローディング画面など）を定義する仕組み。
React.lazy() 関数でモジュールを動的に読み込み、Suspense で読み込み完了を待つ。React は未完了の Promise を throw し、Suspense がそれをキャッチして fallback を表示する。
React.lazy() を使った遅延読み込みに対応した Suspense は、React 16.6 以降で利用できる。

 React.lazyの書き方const LazyComponent = React.lazy(() => import('./MyComponent'));
React.lazy() は 関数を引数にとる
その関数の中で import()（＝動的import）を実行する必要がある

 React.lazy() + Suspense の具体例// MyComponent.tsx 対象のコンポーネント
export default function MyComponent() {
  return <div>Hello from lazy component!</div>;
}

// App.tsx 親コンポーネントで React.lazy() を使う
import React, { Suspense } from 'react';

// React が内部で Promise を throw してくれる
const LazyComponent = React.lazy(() => import('./MyComponent'));

export default function App() {
  return (
    <div>
      <h1>App Component</h1>
      <Suspense fallback={<div>Loading lazy component...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

 流れLazyComponent はまだ読み込まれていない（初回レンダリング）
React.lazy() は import() を実行 → 読み込みがまだ完了していない
React は、import() モジュールの読み込みが終わるまで未完了の Promise を throw する
レンダリング時点でまだ解決されていない場合、React が内部で Promise を throw し、Suspense がそれをキャッチして fallback を表示する
fallback に指定した「Loading lazy component...」が表示される
モジュールが読み込まれたら、LazyComponent が描画される

Suspenseとは？

React.lazyの書き方

React.lazy() + Suspense の具体例

流れ

Discussion