Reactアプリケーションのパフォーマンス改善において、再レンダリングの最適化は避けて通れないテーマです。

その中で登場するのが React.memo。
この関数は「同じpropsなら再描画をスキップする」という、非常に便利な仕組みを提供してくれます。

ですが、使いどころを間違えると逆にパフォーマンスが悪化したり、意図しない挙動に悩まされることもあります。

この記事では、React初心者の方にもわかりやすく React.memo の基本と応用を、実際のコード例とともに徹底解説いたします。

公式ドキュメントと併せて理解を深められる構成となっておりますので、ぜひ最後までご覧ください。

コンポーネントの再レンダリングとは

Reactは、状態（state）やpropsが変化すると、自動的にその影響を受けるコンポーネントを再レンダリングします。

この挙動自体はReactの利点でもありますが、不要なレンダリングが頻発すると、パフォーマンスに大きな影響を与える可能性があります。

例：親コンポーネントの更新による再レンダリング

tsxCopy codeconst Child = () => {
  console.log('Childレンダリング');
  return <div>子コンポーネント</div>;
};

const Parent = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      <Child />
    </div>
  );
};

このコードでは、Childは自身のpropsが変わっていないにもかかわらず、Parentが更新されるたびに再レンダリングされてしまいます。

React.memoの基本的な使い方

ここで React.memo を使うと、propsが変わらない限り再レンダリングを防ぐことができます。

基本構文

tsxCopy codeconst Child = React.memo(() => {
  console.log('Childレンダリング');
  return <div>子コンポーネント</div>;
});

このように React.memo でラップするだけで、**「propsに変化がない限り、描画されない」**状態になります。

上記の Parent コンポーネントをそのまま使った場合、Child はボタンクリック時に再描画されません。

---

React.memoの内部の仕組み

React.memoは、propsを**浅い比較（shallow comparison）**でチェックしています。

つまり、オブジェクトの中身までは見ません。

浅い比較の落とし穴

tsxCopy codeconst Child = React.memo(({ data }) => {
  console.log('Childレンダリング');
  return <div>{data.value}</div>;
});

const Parent = () => {
  const [count, setCount] = useState(0);
  const data = { value: 'テスト' }; // 新しいオブジェクトを毎回生成

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>カウント</button>
      <Child data={data} />
    </div>
  );
};

この例では、dataは毎回新しい参照として扱われるため、React.memoは毎回再レンダリングを実行してしまいます。

対策：useMemoを使ってpropsをメモ化

tsxCopy codeconst Parent = () => {
  const [count, setCount] = useState(0);
  const data = useMemo(() => ({ value: 'テスト' }), []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>カウント</button>
      <Child data={data} />
    </div>
  );
};

こうすることで data の参照が変わらず、React.memo の恩恵を受けられます。

---

React公式の解説

公式ドキュメントでは、以下のように React.memo の使いどころが説明されています：

React.memo は、パフォーマンスの最適化が必要な場面でのみ使うべきです。

React.memo – React公式ドキュメント

つまり、むやみに使うのではなく「レンダリングが重いコンポーネント」や「再描画の頻度が高い親コンポーネントの影響を受けやすい子」に対して使うのが基本です。

表：React.memoの利点と注意点まとめ

項目	内容
主な効果	propsに変化がない限り再レンダリングを防止
適用対象	重い処理を行うPure Component（関数コンポーネント）
比較の仕組み	propsの浅い比較（shallow equality）
避けるべき使い方	毎回新しいオブジェクト/関数をpropsとして渡すようなコンポーネント
相性の良い仕組み	useCallback / useMemo と併用すると効果が高まる

最後までご覧いただきありがとうございました。