Reactのパフォーマンスを図る際に気をつけなければいけないことをまとめる
Reactにおけるパフォーマンスチューニングの知見について、色々と調べたのでまとめる。
方針
無駄な計算を抑えて、出来るだけ再レンダリングしないようにする。
計測方法
react dev toolを使用する
各コンポーネントがコミットされる時間、および、レンダリング回数に注目するのが良さそう。
パフォーマンス改善方法
React.memo
propsの値が等価か否かに応じて再レンダリングを決定する。等価であれば再レンダリングをせずにメモ化したコンポーネントをreturnする。
React.useMemo
メモ化された値を返すフック。
コンポーネントの再レンダリング時に値を再利用できる。値の不要な再計算をスキップすることでパフォーマンスの向上が期待できる。第二引数に依存引数を指定し、その配列の値によって、メモ化した値を返すか否かが決定する。
React.useCallback
React.memoでメモ化したコンポーネントにuseCallbackでメモ化したコールバック関数を Props として渡すことで、コンポーネントの不要な再レンダリングをスキップできる。依存配列の値によって、メモ化した関数を返すか否かが変化する。
useCallbackはReact.memoと併用するもの。以下のような使い方をしても不要な再レンダリングを防ぐことができない可能性があるので注意。
React.memoでメモ化をしていないコンポーネントにuseCallbackでメモ化をしたコールバック関数を渡す
逆に言うと、子供のコンポーネントに対して関数を渡すようなことがなければ、特に useCallback を使う意味はないということです。(厳密に言うと PureComponent のように Props の変化に対して shallow equal で再描画判定を行うような場合限定なのですが、親が子のコンポーネントがどうやって再描画判定しているのかを気にするのも不自然な話なので、子に関数を渡している場合は useCallback で包んでおけばいいと思います。)
その他
レンダリングの方式をページに合わせて最適な形にするのが良さそう。最近だとSSGでもISRを用いて動的コンテンツに対応できたりするから、ページやサービスの要件に合わせて、最適なレンダリング方式を選定していく。
参照記事
