lazy

lazy を使うことで、あるコンポーネントが初めてレンダーされるまで、そ�?コード�?読み込みを遅延させることができます。

const SomeComponent = lazy(load)

リファレンス
- lazy(load)
- load 関数
使用法
- サスペンスを使ったコンポーネント�?遅延読み込み
トラブルシューティング
- lazy コンポーネント�? state が予期せずリセットされる

リファレンス

`lazy(load)`

lazy をコンポーネント�?外部で呼び出し、遅延読み込みされる React コンポーネントを�?�言します。

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

さらに例を見る

引数

load: Promise または thenable（then メソッドを持つ Promise �?ようなオブジェクト）を返す関数。返されたコンポーネントを初めてレンダーしようとするときまで React は load を呼び出しません。React が初めて load を呼び出した後、それが解決 (resolve) する�?を待ち、解決した値�? .default を React コンポーネントとしてレンダーします。返された Promise と解決済み�?値は両方ともキャッシュされるため、React は load を 2 度以上呼び出しません。Promise が reject された場合、React はそ�?理由を throw し、最も近いエラーバウンダリで処理できるようにします。

返り値

lazy は、ツリー内でレンダーできる React コンポーネントを返します。遅延コンポーネント�?コードがまだ読み込まれていない間、レンダーしようとするとサスペンド (suspend) します。<Suspense> を使用して、読み込み中にローディングインジケータを表示します。

`load` 関数

引数

load は引数を受け取りません。

返り値

Promise または何らか�? thenable（then メソッドを持つ Promise �?ようなオブジェクト）を返す必要があります。最終的に、有効な React コンポーネント型、つまり例えば関数、memo、または forwardRef コンポーネント�?ようなも�?を .default プロパティとして持つオブジェクトに解決される必要があります。

使用法

サスペンスを使ったコンポーネント�?遅延読み込み

通常、コンポーネントは静的な import �?�言を使ってインポートします。

import MarkdownPreview from './MarkdownPreview.js';

こ�?コンポーネント�?コード�?読み込みを、初めてレンダーされるときまで遅延させるには、こ�?インポートを以下�?ように�?き換えます。

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

こ�?コードはダイナミック import() を用いており、あなた�?バンドラやフレームワークから�?サポートが必要かもしれません。こ�?パターンを用いる場合は、遅延インポートしようとしているコンポーネントが default でエクスポートされている必要があります。

コンポーネント�?コードがオンデマンドで読み込まれるようになった�?で、読み込み�?最中には何を表示するべきかを指�?�する必要があります。これは、遅延コンポーネントまたはそ�?親�?いずれかを <Suspense> バウンダリでラップすることで行うことができます。

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
 </Suspense>

こ�?例では、MarkdownPreview �?コードはレンダーしようとするまで読み込まれません。もし MarkdownPreview がまだ読み込まれていない場合、そ�?代わりに Loading が表示されます。チェックボックスをオンにしてみてください。

Fork

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('Hello, **world**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Show preview
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Preview</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Add a fixed delay so you can see the loading state
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

こ�?デモは人為的に遅延させて読み込まれます。もう一度チェックボックスをオフにしてからオンにすると、Preview はキャッシュされている�?で、ローディング状態は表示されません。再度ローディング状態を表示するには、サンドボックス�? “Reset” をクリックしてください。

サスペンスを使ったローディング状態�?�?�理についてもっと学ぶ

トラブルシューティング

`lazy` コンポーネント�? state が予期せずリセットされる

lazy コンポーネントを他�?コンポーネント�?内部で�?�言しないでください。

import { lazy } from 'react';

function Editor() {
  // 🔴 Bad: This will cause all state to be reset on re-renders
  const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));
  // ...
}

代わりに、常にモジュール�?トップレベルで�?�言してください。

import { lazy } from 'react';

// ✅ Good: Declare lazy components outside of your components
const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

function Editor() {
  // ...
}

PreviousforwardRef Nextmemo