React.Suspense と React.lazy でコンポーネントを動的に読み込む - 30歳からのプログラミング

React.SuspenseとReact.lazyを使うことで、import()で動的に読み込んだコンポーネントを通常のコンポーネントとしてレンダリングすることができる。 動的読み込みはパフォーマンス向上のためなどに使われるが、それを簡単に React アプリに取り入れることができる。 import()の概要はこちらを参照。 numb86-tech.hatenablog.com この記事に出てくるコードは React のv16.10.2で動作確認している。 React.lazy React.lazyは、コンポーネントを返す関数。引数には、import()の返り値をそのまま返す関数を渡す。そしてimport()で読み込まれるモジュールは、コンポーネントをdefaultでエクスポートしている必要がある。 そのため、以下のようになる。 // One.js import React from 'r

[amatsukiurato]

知らなかった