React.memoでメモ化する技術

React.memoとは

React.memoとは、コンポーネント(renderの結果)をメモ化するReactのAPIのことです。
(「メモ化」とは、計算結果を保持して再利用する手法のこと)
イメージ的にはキャッシュと似たようなものです。これを使うことでコンポーネントの再renderをスキップする事ができます。

メモ化対象のコンポーネント例

• renderするコストが高いコンポーネント

• 頻繁にrenderされるコンポーネントの子コンポーネント

使い方

React.memo(関数コンポーネント)のように書きます。

// 渡した関数がメモ化される
const Hello = React.memo(({name}) => {
  return <h1>Hello! {name}!</h1>;
}

仕組み

新しく渡されたPropsと前回のPropsを比較して、等価であれば再renderせずにメモ化したコンポーネントを再利用しています。