Reactのパフォーマンス考慮例 - memo, Lazy loading
はじめに
Reduxの公式ドキュメントに沿って概要を押さえつつ、気になった部分を深掘って整理しています。
本記事では 、フロントエンド開発のパフォーマンス考慮において意識するべき点についてまとめていきます。
パフォーマンスを最適化するためには、さまざまな観点から対策を行うことが重要です。
内容を洗っていると割と考慮すべきことが多かったので整理して書き起こしておこうと思います。
再レンダリングの最適化
Reactの memo や useCallback を適切に利用することで、コンポーネントの不要な再レンダリングを防ぎます。
また、useMemo を使って高コストな計算の結果をメモ化することも有用です。
再レンダリングが起きる条件
- propsが更新されたとき
- stateが更新されたとき
- 親componentが再レンダリングされたとき
React.memo
React.memoの引数にコンポーネントを渡すことでメモ化することができます。
propsの値に依存して再レンダリングが発生します。
以下のようなコンポーネントの再レンダリングをスキップすることで、パフォーマンスの向上が期待できます。
useCallback
useCallbackの第一引数に渡した関数をメモ化することができます。
第二引数の配列に含まれる値に依存して再レンダリングが発生します。
基本的にはReact.memoと併用して使用します。
React.memoでメモ化したコンポーネントに関数をpropsとして渡すと関数の性質上、呼び出されるタイミングで参照が変わり常に差分として検知されるため、意図しない形でも再レンダリングが発生してしまうため、その場合に関数をuseCallbackでラップします。
useCallbackを使用することで、関数が同じインスタンスを維持し、メモ化の効果を最大限に活用できます。
API呼び出しの最適化
ネットワークリクエストはコストが高いため、不必要なリクエストを減らすことが重要です。
データのキャッシングの他にもデータのフェッチを遅延させる（Lazy loading）、ページネーション等を利用することで最適化できます。
Lazy loading （遅延読み込み）
今回はReactでのLazy loadingを行う例を解説します。
Suspence
fallbackにはReact要素（JSX）を指定します。
<Suspense fallback={<Loading />}> <SomeComponent /> </Suspense>
React.lazy
初めてレンダリングされるまでコンポーネントのコードの読み込みを延期する場合にはlazyを使います。
React.lazyは動的なimport()文を引数に取り、そのモジュールのデフォルトエクスポートをレンダリングするための遅延コンポーネントを生成します。
const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> </div> ); }
このように、React.lazyと<Suspense>を組み合わせることで、アプリケーションのロード時間を改善し、コードの分割を容易に行うことができます。
この例では、OtherComponentのコードは初めてレンダリングが必要になるまで読み込まれません。その読み込みが行われる間、<Suspense>のfallback propで指定された要素が表示されます。
参考
続く…
コメント
本記事の内容は以上になります！
書籍の続きのアウトプットも随時更新したいと思います。
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
