はじめに
今までReact.lazy使ったことなかったんですけど、パフォーマンスの重要に対して意識を持つようになってから、React.lazyが役立つって知りました。なので今回学んだことをまとめてみました！
React.lazyは何をしているのか
React.lazyを使うと、初回のレンダリング負担を軽減できます。どういうことかというと、必要なときにだけコンポーネントを読み込むんです。これによって、最初にアプリがロードされるときのスピードが上がり、ユーザー体験が向上します。
また、React.lazyは、アプリのパーツを分けて、それぞれ必要なときにだけ読み込む「コードスプリッティング」を簡単にするためのものです。これにより、初期のロード時間を短縮し、全体的なパフォーマンスが向上します。
どんな感じで書くのか
基本的なコンポーネントの呼ぶ時のimportの仕方です。いわゆるstatic importと言われるやつですね。
const NormalComponent from './NormalComponent';
馴染みあるimportだと思います。
React.lazyを使う場合
import { lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
上記でコンポーネントが必要に応じて読み込まれるようになったので、Suspenseを使って遅延して読み込まれている間に別のコンポーネント(ローディング画面)を表示するようにします。
(Suspenseの内容はこちらから確認ください)
import { Suspense, lazy, useState } from "react";
import "./App.css";
const LazyComponent = lazy(() => delayForDemo(import("./components/Lazy")));
function App() {
const [isShow, setIsShow] = useState<boolean>(false);
return (
<div>
<h1>React.lazyを学びたい</h1>
<label>
<input
type="checkbox"
checked={isShow}
onChange={() => setIsShow(!isShow)}
/>
Show preview
</label>
{isShow && (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
)}
</div>
);
}
export default App;
// 今回はデモ用に数秒遅延させてます！！
function delayForDemo(promise) {
return new Promise(resolve => {
setTimeout(resolve, 2000);
}).then(() => promise);
}
LazyComponentの中身はこちら
import React from 'react';
const LazyComponent = () => {
return <div>これは遅延読み込みされたコンポーネントです。</div>;
};
export default LazyComponent;
実際の感じはこちら
上記のようにチェックボックスを選択すると、コンポーネントが表示されるような仕組みです。これはチェックボックスが選択されていない時はLazyComponentは読み込まれてない状態になります。
React.lazyを使ってみて
lazyを使用しなかった場合の読み込み結果
ネットワークでtsxで結果絞った場合に、Lazy.tsxが読み込まれているのがわかりますね！
では別にlazy importを使用した場合の結果はどうでしょう？
lazyを使用した場合の読み込み結果
先ほどの画像とは違って、Lazy.tsxはまだ読み込まれてません！！
結局どういうタイミングで使えば良い？
初回ページのレンダリングが重たい時とかユーザーが特定のページやビューに移動するまで読み込む必要がないコンポーネントがある場合に使えば良いのかなと思います。
先ほど確認したコンポーネント自体は重くはないのでパフォーマンスに大きな差は出ないと思いますが、大きなアプリケーションなどでは効果は大きいと思います。
終わり
やってみると意外と簡単にできるもんですね。エンジニアリングを始めたての頃はなかなかパフォーマンスといった点で意識できることは多くないと思います。ですが意識し出した時に一番最初に簡単で手につきやすいのはReact.lazyではないでしょうか？
ぜひ自分で触って確かめてみてください。
参考
Discussion