REACT Memo

React.memo は、関数コンポーネントのメモ化を提供する高階コンポーネント（HOC）です。コンポーネントが同じプロパティ（props）で再レンダリングされるのを防ぐために使用します。これにより、パフォーマンスの向上を図ることができます。

React.memo の使用方法

以下は、React.memo の基本的な使用例です。

import React from 'react';

const MyComponent = ({ name }) => {
  console.log('Rendering MyComponent');
  return <div>Hello, {name}</div>;
};

// MyComponent をメモ化
const MemoizedComponent = React.memo(MyComponent);

const App = () => {
  return (
    <div>
      <MemoizedComponent name="John" />
      <MemoizedComponent name="John" />
    </div>
  );
};

export default App;

上記の例では、MyComponent が同じ name プロパティで2回レンダリングされますが、React.memo によって2回目のレンダリングはスキップされます。コンソールには「Rendering MyComponent」が一度だけ表示されます。

React.memo のカスタム比較関数

デフォルトでは、React.memo は浅い比較（shallow comparison）を行います。カスタム比較関数を提供することで、より複雑な条件で再レンダリングを制御することができます。

import React from 'react';

const MyComponent = ({ name, age }) => {
  console.log('Rendering MyComponent');
  return <div>Hello, {name}. You are {age} years old.</div>;
};

// カスタム比較関数
const areEqual = (prevProps, nextProps) => {
  return prevProps.name === nextProps.name;
};

// MyComponent をメモ化
const MemoizedComponent = React.memo(MyComponent, areEqual);

const App = () => {
  return (
    <div>
      <MemoizedComponent name="John" age={30} />
      <MemoizedComponent name="John" age={40} />
    </div>
  );
};

export default App;

この例では、カスタム比較関数 areEqual を使用して name プロパティのみを比較しています。age プロパティが異なる場合でも、name が同じであれば再レンダリングは行われません。コンソールには「Rendering MyComponent」が一度だけ表示されます。

利点
不必要な再レンダリングを防ぎ、パフォーマンスを向上させる。
特にプロパティが頻繁に変更されないコンポーネントで有効。
注意点
メモ化自体にコストがかかるため、すべてのコンポーネントに適用するのは逆効果。
状態やプロパティの変化が頻繁にある場合、効果が薄れることがある。