React.lazyで遅延レンダリング

React

Reactで遅延レンダリングをする方法

Reactで遅延レンダリング（Lazy Loading）を行うには、React.lazyとSuspenseを使用する方法が一般的です。
これにより、コンポーネントが必要になるまでロードを遅らせ、アプリケーションの初期読み込み時間を短縮することができます。
以下に、具体的な方法を示します。

手順

1. コンポーネントの動的インポート
React.lazyを使用して、コンポーネントを動的にインポートします。

2. サスペンスコンポーネントの使用
Suspenseを使用して、動的にロードされるコンポーネントのフォールバックUI（ロード中に表示するUI）を設定します。

コード例

以下に、具体的なコード例を示します。

import React, { Suspense } from 'react';

// 遅延レンダリングするコンポーネントを動的にインポート
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

詳細説明

React.lazy

const LazyComponent = React.lazy(() => import('./LazyComponent'));

import()を使用して、コンポーネントを動的にインポートします。
この方法により、LazyComponentは必要になるまでロードされません。

Suspense

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

Suspenseは、動的にインポートされたコンポーネントがロードされるまでの間に表示するフォールバックUIを提供します。
この例では、

Loading...
が表示されます。

メリット

初期ロード時間の短縮
必要なコンポーネントだけを先に読み込むことで、画面の読み込み時間を短縮できます。

パフォーマンスの向上
ユーザー体験を損なうことなく、ページのパフォーマンスを向上させることができます。

注意点

  • 遅延ロードされるコンポーネントは、初回アクセス時に追加のネットワークリクエストが発生するため、適切なフォールバックUIを提供することが重要です。
  • エラーハンドリングのためにReact.Suspenseと組み合わせてErrorBoundaryを使用することも検討してください。

この方法で、Reactアプリケーションのパフォーマンスを効果的に改善できます。