React のパフォーマンス向上手法

思いつく限り書いていこうと思います。

Code-Splitting

JavaScript ファイルを分割し、動的インポートによって適宜必要な処理のみを読み込むようにします。

個人的に効果的だと思うのは、SPA における React.lazy と Suspense をかませたやつです。

自分はRoute-based code splittingに沿って、Route単位で分割することが多いです。

参考(Code-Splitting)

• Code-Splitting
• Code Splitting
• Dynamic Import
• Code Splitting and Prefetching

React.memo

nextProps と prevProps を比較することにより、結果によって再レンダーを行うかどうか判定することができます。

ただ、比較処理が追加されることにより場合によってはパフォーマンスが落ちることもあるようです。

参考(React.memo)

• React.memo
• SFC vs React.memo vs PureComponent
• Use React.memo() wisely

useCallback, useMemo

これらの hooks によって生成される関数や定数を、生成に関する値の変更時のみ再生成を行うことで、レンダーごとに無駄に再生成されるのを防ぎます。

参考(useCallback, useMemo)

• useCallback
• useMemo
• 雰囲気で使わない React hooks の useCallback/useMemo

ちょっと短いんですが、書くのに疲れたので続きはまた後日…。