nju33ノート一覧へコード分割React.SuspenseとReact.lazyの2つを一緒に使うことで、必要になった時に初めてコードを読み込んでコンポーネントとしてレンダリングするというフローを簡単に実装できます。(サーバーサイドレンダリング)では使えません。時には実行しないような処理として書く必要があります。適当に動的に読み込むコンポーネントを作ります。以下をlazy-child.jsとします。Child</div>;このコンポーネントを使って試してみます。);}LazyChildではReact.lazyでラップしてlazy-child.jsを動的に読み込む関数を中に置いてます。返される値はコンポーネントですが、このコンポーネントは必ずReact.Suspense以下に配置する必要があります。specified.というエラーになります。React.Suspenseにはfallback属性を渡します。これはコードを読み込んでいる最中に変わりに表示される要素になります。この動作を分かりやすくする為に一時的に以下のように書き換えてみると分かりやすいです。これはわざと読み込みに2秒以上かかるようにしたコードです。import("./lazy-child");});。