React.memo
メモ化して不要な再描画を抑える
実装の該当箇所
なぜ必要になるか
Componentは親がrenderingされると、子もrenderingされる
子は、前回と全く同じ内容である場合でも、renderingされてしまう
それを防ぐために使う
指定した条件を満たしている場合のみ再renderingさせることができる
例えば、特定のpropsが変わった場合にのみ再renderingさせるなど
引数
第1引数はFunction Component
第2引数は比較関数
異なる場合のみ再renderingする
propsは描画のたびに新しいobjectになるが、内容が等しいかどうかを比較する
(prevProps, nextProps) => bool
再レンダリングを行わないときにtrueを返すような関数
コンポーネントのインターフェースが決まった時点で、「この値が変更されたときのみ再描画したい」というのが普通は決まるはず
その意図に反するときにmemoを使う
その値が、前回と今回とで等しいかどうかを判定するロジックを書く
全く同じprops値が渡ってくるにも関わらず、親が再描画されるせいで、頻繁に再描画される場合
特に親からpropsを受け取らないようなFCのとき
頻繁にrenderされる場合
注意点など
毎回異なるpropsが来ることが明確である場合などは余計な計算が増えるだけ
propsとして、functionを渡す時はuseCallbackを使いましょう
参照が異なるので、memoを使っていても毎回renderingを引き起こす