問題一覧に戻る
中級高度なパターン
問題66: コンポーネントの遅延読み込み

React.lazyとSuspenseを使用して、コンポーネントを必要な時に動的に読み込む方法を学びます。初期バンドルサイズを削減し、アプリケーションの起動速度を向上させます。lazyで動的インポートを行い、Suspenseで読み込み中のフォールバックUIを表示します。ルート別のコード分割や、使用頻度の低い機能の分離に最適です。

import React, { Suspense } from 'react';

{/* 遅延インポート */}
const HeavyComponent = React.(() => import('./Heavy'));

function App() {
  const [show, setShow] = React.useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>Load</button>
      {show && (
        {/* Suspenseバウンダリ */}
        < fallback={<div>Loading...</div>}>
          <HeavyComponent />
        </>
      )}
    </div>
  );
}

export default App;