React.memoを紹介する前に、React.ComponentとReact.PureComponentについて説明します.

React.Component

React.Componentは、ES 6 classに基づくReactコンポーネントである.
Reactは、コンポーネントとしてclassまたはfunctionを定義ことを可能にする、コンポーネントクラスを定義するには、React.Componentを継承する必要がある.
例:

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

注意:React.Componentを継承するReactコンポーネントクラスでは、render()が必須メソッドであり、その他はオプションです.

React.PureComponent

React.PureComponentとReact.Componentは同様であり、いずれもコンポーネントクラスを定義している.異なる点は、React.ComponentはshouldComponentUpdate()を達成しなかったが、React.PureComponentはpropsとstateの浅い比較によって達成された.
コンポーネントのpropsとstateが同時にrenderの内容も一致すれば、React.PureComponentを使用することができ、コンポーネントの性能を向上させることができる.
例:

class Welcome extends React.PureComponent {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

propsやstateに複雑なデータ結果がある場合、使いにくいPureComponent .

React.memo

React.memoは、React.PureComponentと同様の高次コンポーネントであり、React.memoとは異なりfunctionコンポーネントであり、React.PureComponentはclassコンポーネントである.
例:

const MyComponent = React.memo(props => {
  /* render using props */
  return (

  );
});

この方式は依然としてオブジェクトの浅い比較であり、複雑なオブジェクトがある場合はrenderにならない.React.memoにおいて、その比較方法の実装をカスタマイズすることができる.
例:

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

この方法はV 16である.6.0サポート
『React原稿』のお勧め