C
React 一覧
前へ19 / 22次へ
React/最適化/Lesson 19

React.memo

30分·theory
このチャプター
2/2
JavaScript

React.memo

💡 なぜ学ぶべきか？

🎯 不要な再レンダリングを防ぐことで、アプリの動作を高速化します。
💼 リスト内に数千件のアイテムをレンダリングする際、パフォーマンスの差は劇的です。
⚡ 面接でのパフォーマンス最適化に関する質問の定番回答です。
🔗 本番環境でパフォーマンス問題を解決する際の最初のツールです。
🏢 실무에서는
本番環境では、検索結果リスト・無限スクロールフィード・リアルタイム通知など、頻繁に更新される画面で React.memo を使用します。たとえば Naver Search のような検索体験では、ユーザーが文字を入力するたびに結果リスト全体が再レンダリングされないよう、各検索結果アイテムを React.memo でラップしてパフォーマンスを維持します。

React.memoとは？

React.memo

Propsが変更されない場合に再レンダリングをスキップする高階コンポーネント(HOC)です。

いつ使う？

  • ▸親が頻繁に再レンダリングされるが、子のPropsは変わらない場合
  • ▸レンダリングコストが高いコンポーネント
  • ▸リストの個々のアイテム

React 19での変化

React Compilerが自動的にmemoを適用するため、手動での使用は少なくなります。

この概念はReactコンポーネント開発において根幹をなします。Reactの宣言的UIパラダイムを理解し、propsとstateの違いを明確に区別してください。コンポーネントは入力(props)に対して常に同じ出力(JSX)を返す純粋関数のように動作する必要があります。

💻 React.memo 実践 
import { memo, useState, useCallback } from "react";

// 1. 基本的なmemo
const ExpensiveChart = memo(function ExpensiveChart({ data }: { data: number[] }) {
  console.log("Chart レンダリング！"); // props変更時のみ出力
  return (
    <div className="h-64 bg-gray-800 rounded p-4">
      {data.map((v, i) => (
        <div key={i} className="inline-block bg-green-500 mx-0.5"
          style={{ height: `${v}%`, width: 20 }} />
      ))}
    </div>
  );
});

// 2. カスタム比較関数
const UserCard = memo(
  function UserCard({ user }: { user: { id: string; name: string; avatar: string } }) {
    return <div>{user.name}</div>;
  },
  (prevProps, nextProps) => {
    return prevProps.user.id === nextProps.user.id; // IDのみ比較
  }
);

// 3. 親コンポーネント
function Dashboard() {
  const [count, setCount] = useState(0);
  const [chartData] = useState([20, 40, 60, 80, 50, 30, 70]);

  // useCallbackで関数参照を安定化
  const handleChartClick = useCallback(() => {
    console.log("チャートクリック");
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      {/* count変更時、チャートは再レンダリングされない */}
      <ExpensiveChart data={chartData} />
    </div>
  );
}

💡 💡 React.memoのヒント

  • ▸React 19: Compilerが自動処理 → 手動memoを減らす
  • ▸オブジェクト/配列のProps: useMemoで参照を安定させる
  • ▸コールバックProps: useCallbackで関数参照を安定させる
  • ▸計測: React DevTools Profilerで実際の効果を確認する

この概念はReactコンポーネント開発において根幹をなします。Reactの宣言的UIパラダイムを理解し、propsとstateの違いを明確に区別してください。コンポーネントは入力(props)に対して常に同じ出力(JSX)を返す純粋関数のように動作する必要があります。

⚛️ Reactパターン — React.memo

React.memoをReactでどのように使うか、コードを交えてステップごとに学びましょう。
1 🧩 1. React.memoを使うシナリオ
この機能が必要な状況。
↓
2 💻 2. コードの記述
React.memoの基本的な使い方。
↓
3 🎨 3. レンダリング結果
ユーザーが見る画面。
↓
4 💡 4. 実践的なヒント
よくある落とし穴とベストプラクティス。

🎮 React.memo — ステップごとの理解

各ステップをクリックして内容を読み、「理解しました」ボタンで進捗を確認してください。
🖥️ 実行結果 — レンダリングされたReactコンポーネント
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — まず結果を確認し、エディタで自由に編集できます。

確認クイズ

React.memoはどのように再レンダリングを防ぐのですか？
💡 React.memo は HOC (高階コンポーネント) としてコンポーネントをラップし、props が変わっていなければ直前のレンダリング結果を再利用します。親が再レンダリングされても、子の不要な再レンダリングを防ぎます。浅い比較を使用するため、オブジェクトや関数を props として渡す場合は useMemo / useCallback と組み合わせて使用してください。
先に読むとよい概念: useTransition / useDeferredValue
次のおすすめ: Error Boundary + Suspense
前へ一覧次へ
React.memo / useMemo / useCallback - React