React.memo は、機能コンポーネントの不必要な再レンダリングを防止することでパフォーマンスを最適化するために React で使用される高次コンポーネントです。これは、コンポーネントの結果をメモ化し、プロパティが変更された場合にのみ再レンダリングすることで機能します。これは、同じ props を与えて同じ出力をレンダリングする機能コンポーネントのパフォーマンスの最適化に役立ちます。

使用例:

import React from 'react';

const MyComponent = ({ count }) => {
  console.log('Component re-rendered');
  return 
Count: {count}
;
};

export default React.memo(MyComponent);

この例では、MyComponent は count prop が変更された場合にのみ再レンダリングされます。親コンポーネントが再レンダリングされても count prop が同じままの場合、MyComponent は再レンダリングされず、不必要な計算が削減されます。

デフォルトでは、React.memo はプロパティの浅い比較を実行しますが、必要に応じて、より深いチェックのためのカスタム比較関数を提供することもできます:

const MyComponent = React.memo((props) => {
  /* component code */
}, (prevProps, nextProps) => {
  // return true if props are equal, false otherwise
  return prevProps.someValue === nextProps.someValue;
});

これにより、より複雑なプロップ構造がある場合、パフォーマンスをさらに最適化できます。