Reactガイドを読んでいくその133

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

React.memo

React.PureComponentと似ているが、クラスではなく関数コンポーネント用の高階コンポーネントになる。
propsを与えられたあるコンポーネントが同じ結果をレンダーする場合、結果を記憶してパフォーマンス向上に役立てるためにReact.memoを使ってラップすることができる。

メモがある場合はReact側はコンポーネントのレンダーをスキップして最後のレンダー結果を再利用する。

注意が必要なのはReact.memoはpropsの変更に対してのみ効果がある。
useState や useContext をフックして使っていた場合、stateやコンテクストの変化に応じた再レンダーが発生する。
デフォルトではpropsのオブジェクト内の複雑なオブジェクトは浅い比較のみが行われ、階層が深い比較は対象とならない。
2番目の引数でカスタム比較関数を指定することで制御をすることができる。
こういった方法はバグを生み出しやすいため、パフォーマンスチューニングにのみ使用するようにする。

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  nextProps を render に渡した結果が
  prevProps を render に渡した結果となるときに true を返し
  それ以外のときに false を返す
  */
}
export default React.memo(MyComponent, areEqual);

今日はここまで