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

2020-10-24

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


Code-Splitting

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

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

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

参考(Code-Splitting)

React.memo

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

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

参考(React.memo)

useCallback, useMemo

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

参考(useCallback, useMemo)


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

© 2018 kk-web