React useCallbackとReact.memoの使い方と判断表

useCallbackは「関数の参照を保つ」フック、React.memoは「propsが同じなら子の再レンダリングを省く」仕組みで、子の再レンダリングを防ぐには2つをセットで使います。 どちらか片方だけでは、子コンポーネントは親と一緒に毎回描画されます。「useCallbackを付けたのに意味がない」と感じる場面のほとんどは、この組み合わせが片方欠けていることが理由です。

この記事では、同じ画面に「どちらも使わない」「useCallbackだけ」「memoだけ」「両方」「両方＋インラインのオブジェクトprops」「それをuseMemoで直したもの」の6パターンを並べ、React 19.3.0 と Chromium で実際に動かしたレンダリング回数とProfilerの計測値を表にしました。さらに同じコードを React Compiler 1.0.0 に通したときの変化も測っています。コードはすべてTypeScriptで、そのまま貼って試せます。

useCallbackとReact.memoの早見表

今回の計測結果（親のボタンを20回押したときの、3,000行リストの再レンダリング回数）は次のとおりです。

検証に使った環境とコード

バージョンと実行方法

計測値は React DevTools の画面ではなく、Reactが用意している Profiler コンポーネントのコールバックで取りました。DevToolsのProfilerタブに表示される描画時間と同じ仕組みの値です。DevToolsの画面操作そのものは今回は未実行です。描画時間は実行のたびに数ms〜十数msぶれるため、2回実行した範囲で載せています。大切なのはミリ秒の細かい差ではなく、「20回」か「0回」かの違いです。

共通部分：計測とリスト

リストは3,000行あり、行をクリックすると onSelect が呼ばれます。関数の先頭で呼び出し回数を数えています。

import {
  memo, useCallback, useMemo, useState, Profiler,
  type CSSProperties, type ProfilerOnRenderCallback,
} from "react";
import { createRoot } from "react-dom/client";

type Stat = { listRenders: number; commits: number; total: number };
const stats: Record<string, Stat> = {};
(window as any).__stats = stats;
const stat = (id: string) => (stats[id] ??= { listRenders: 0, commits: 0, total: 0 });

// Profiler：更新時の描画時間を id ごとに合計する
const onRender: ProfilerOnRenderCallback = (id, phase, actualDuration) => {
  if (phase !== "update") return;
  const s = stat(id);
  s.commits += 1;
  s.total += actualDuration;
};

const ITEMS = Array.from({ length: 3000 }, (_, i) => `item-${i}`);

type ListProps = {
  label: string;
  onSelect: (item: string) => void;
  rowStyle?: CSSProperties;
};

function List({ label, onSelect, rowStyle }: ListProps) {
  stat(label).listRenders += 1; // 計測用。描画された回数を数える
  return (
    <ul>
      {ITEMS.map((item) => (
        <li key={item} style={rowStyle} onClick={() => onSelect(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
}
const MemoList = memo(List);

描画中に外部の変数を書き換えるのは計測のためだけの書き方です。通常のコードでは入れません。

パターン1：どちらも使わない

function PlainPanel() {
  const [count, setCount] = useState(0);
  const [selected, setSelected] = useState("");
  const handleSelect = (item: string) => setSelected(item);
  return (
    <section>
      <button id="btn-plain" onClick={() => setCount((c) => c + 1)}>
        plain {count} {selected}
      </button>
      <List label="plain" onSelect={handleSelect} />
    </section>
  );
}

ボタンを押すと count が変わり、PlainPanel が再レンダリングされます。Reactは親が再レンダリングされると、propsが変わっていなくても子を再レンダリングします。 これが出発点です。

パターン2：useCallbackだけ

function CallbackOnlyPanel() {
  const [count, setCount] = useState(0);
  const [selected, setSelected] = useState("");
  const handleSelect = useCallback((item: string) => setSelected(item), []);
  return (
    <section>
      <button id="btn-callbackOnly" onClick={() => setCount((c) => c + 1)}>
        callbackOnly {count} {selected}
      </button>
      <List label="callbackOnly" onSelect={handleSelect} />
    </section>
  );
}

パターン3：memoだけ

function MemoOnlyPanel() {
  const [count, setCount] = useState(0);
  const [selected, setSelected] = useState("");
  const handleSelect = (item: string) => setSelected(item); // 毎回新しい関数
  return (
    <section>
      <button id="btn-memoOnly" onClick={() => setCount((c) => c + 1)}>
        memoOnly {count} {selected}
      </button>
      <MemoList label="memoOnly" onSelect={handleSelect} />
    </section>
  );
}

パターン4：memo ＋ useCallback

function BothPanel() {
  const [count, setCount] = useState(0);
  const [selected, setSelected] = useState("");
  const handleSelect = useCallback((item: string) => setSelected(item), []);
  return (
    <section>
      <button id="btn-both" onClick={() => setCount((c) => c + 1)}>
        both {count} {selected}
      </button>
      <MemoList label="both" onSelect={handleSelect} />
    </section>
  );
}

パターン5：両方そろえたうえで、オブジェクトをインラインで渡す

function InlineObjectPanel() {
  const [count, setCount] = useState(0);
  const [selected, setSelected] = useState("");
  const handleSelect = useCallback((item: string) => setSelected(item), []);
  return (
    <section>
      <button id="btn-inlineObject" onClick={() => setCount((c) => c + 1)}>
        inlineObject {count} {selected}
      </button>
      <MemoList label="inlineObject" onSelect={handleSelect} rowStyle={{ color: "navy" }} />
    </section>
  );
}

パターン6：オブジェクトをuseMemoで保つ

function FixedObjectPanel() {
  const [count, setCount] = useState(0);
  const [selected, setSelected] = useState("");
  const handleSelect = useCallback((item: string) => setSelected(item), []);
  const rowStyle = useMemo<CSSProperties>(() => ({ color: "navy" }), []);
  return (
    <section>
      <button id="btn-fixedObject" onClick={() => setCount((c) => c + 1)}>
        fixedObject {count} {selected}
      </button>
      <MemoList label="fixedObject" onSelect={handleSelect} rowStyle={rowStyle} />
    </section>
  );
}

画面への配置

各パネルを Profiler で囲み、id ごとに描画時間を集計します。

function App() {
  return (
    <>
      <Profiler id="plain" onRender={onRender}><PlainPanel /></Profiler>
      <Profiler id="callbackOnly" onRender={onRender}><CallbackOnlyPanel /></Profiler>
      <Profiler id="memoOnly" onRender={onRender}><MemoOnlyPanel /></Profiler>
      <Profiler id="both" onRender={onRender}><BothPanel /></Profiler>
      <Profiler id="inlineObject" onRender={onRender}><InlineObjectPanel /></Profiler>
      <Profiler id="fixedObject" onRender={onRender}><FixedObjectPanel /></Profiler>
    </>
  );
}

createRoot(document.getElementById("root")!).render(<App />);

実行結果：レンダリング回数とProfilerの計測値

各パネルのボタンを20回ずつクリックし、初回描画を除いた回数を数えました。以下は1回目の実行の出力そのままです。

chromium 141.0.7390.37
plain         List再レンダリング 20 /20  commit 20  平均actualDuration 23.90ms
callbackOnly  List再レンダリング 20 /20  commit 20  平均actualDuration 26.46ms
memoOnly      List再レンダリング 20 /20  commit 20  平均actualDuration 36.21ms
both          List再レンダリング  0 /20  commit 20  平均actualDuration 0.12ms
inlineObject  List再レンダリング 20 /20  commit 20  平均actualDuration 32.55ms
fixedObject   List再レンダリング  0 /20  commit 20  平均actualDuration 0.14ms

2回目の実行では、同じ順に 24.38 / 39.38 / 19.83 / 0.15 / 28.61 / 0.20ms でした。再レンダリング回数は2回とも同じです。

読み取れることは3つあります。

• useCallbackだけ・memoだけでは、20回中20回とも子が描画される。 何も付けない場合と回数が変わりません。
• 両方そろえると0回になり、描画時間は約24msから約0.1msになる。 パネル自身（ボタンのラベル）の描画だけが残ります。
• 両方そろえても、オブジェクトをインラインで渡すと20回に戻る。 useMemoで参照を保つと再び0回になります。

なぜuseCallbackだけでは再レンダリングを防げないのか

Reactの既定の動き

Reactは、あるコンポーネントのstateが変わると、そのコンポーネントとその下にあるすべての子を再レンダリングします。このとき「propsが変わったかどうか」は見ていません。propsを比べるのは、子が memo で包まれているときだけです。

useCallbackがしていること

useCallback(fn, deps) は、依存配列の値が変わらない限り前回と同じ関数オブジェクトを返すだけのフックです。関数の中身を速くするわけでも、子の描画を止めるわけでもありません。

パターン2では handleSelect の参照は毎回同じになりますが、受け取る List が通常のコンポーネントなので、Reactはpropsを比べずに描画します。比べる相手がいないので、参照を保っても結果は変わりません。

memoだけでも防げない理由

パターン3は逆です。MemoList はpropsを比べますが、handleSelect は親が描画されるたびに作り直された別の関数です。JavaScriptでは、中身が同じでも別々に作った関数は等しくなりません。

const a = (item: string) => item;
const b = (item: string) => item;
console.log(Object.is(a, b)); // false
console.log(Object.is({ color: "navy" }, { color: "navy" })); // false
console.log(Object.is("navy", "navy")); // true

onSelect が毎回「変わった」と判定されるため、memo は省略できません。

2つがかみ合う流れ

flowchart TD
    A[親のstateが変わる] --> B[親が再レンダリング]
    B --> C{子はmemo済み？}
    C -- いいえ --> D[子も再レンダリング]
    C -- はい --> E{propsは全部 前回と同じ参照？}
    E -- いいえ --> D
    E -- はい --> F[子の再レンダリングを省略]

memoが「比べる役」、useCallbackとuseMemoが「同じ参照を渡す役」です。両方がそろってはじめて右下の「省略」にたどり着きます。

memoが無効になるprops一覧

パターン5で見たとおり、propsのうち1つでも毎回新しい参照になると memo は省略できません。よくある書き方と、参照を保つ書き方を並べます。

変わらないオブジェクトは、コンポーネントの外に定数として出すのがいちばん簡単です。フックが要らず、依存配列を考える必要もありません。

const ROW_STYLE: CSSProperties = { color: "navy" }; // コンポーネントの外

function Panel() {
  const [count, setCount] = useState(0);
  const handleSelect = useCallback((item: string) => console.log(item), []);
  return (
    <section>
      <button onClick={() => setCount((c) => c + 1)}>{count}</button>
      <MemoList label="const" onSelect={handleSelect} rowStyle={ROW_STYLE} />
    </section>
  );
}

memo・useMemo・useCallbackの違い

useCallback(fn, deps) は useMemo(() => fn, deps) と同じ意味です。関数用の短い書き方がuseCallbackと考えると整理しやすくなります。

const handleA = useCallback((item: string) => setSelected(item), []);
const handleB = useMemo(() => (item: string) => setSelected(item), []);
// handleA と handleB はどちらも「参照が保たれた関数」

使う・使わないの判断早見表

メモ化には、依存配列の比較と値の保持というわずかなコストがあり、コードも長くなります。次の表で「付ける理由」が見つかったときに使うと、読みやすさと速さの両方を保てます。

React.memoを使うかどうか

useCallbackを使うかどうか

useMemoを使うかどうか

迷ったときは、まず何も付けずに書き、Profilerで遅い箇所が見つかってから付ける順番がおすすめです。

依存配列の書き間違いで古い値を参照する例

useCallbackとuseMemoは、依存配列が変わらない限り以前のレンダリングで作った関数や値を返し続けます。関数の中で使っているstateを依存配列に書き忘れると、関数はその時点の値を覚えたままになります。

再現コード

function StalePanel() {
  const [count, setCount] = useState(0);
  const [stale, setStale] = useState("");
  const [fresh, setFresh] = useState("");
  // 依存配列が空：count が 0 のときに作った関数を使い続ける
  const showStale = useCallback(() => setStale(`count=${count}`), []);
  // 依存配列に count：count が変わるたびに関数を作り直す
  const showFresh = useCallback(() => setFresh(`count=${count}`), [count]);
  return (
    <section>
      <button id="btn-inc" onClick={() => setCount((c) => c + 1)}>+1 ({count})</button>
      <button id="btn-stale" onClick={showStale}>stale</button>
      <button id="btn-fresh" onClick={showFresh}>fresh</button>
      <p id="out-stale">{stale}</p>
      <p id="out-fresh">{fresh}</p>
    </section>
  );
}

「+1」を3回押してから「stale」「fresh」を押した結果です。

stale: count=0 / fresh: count=3

画面のカウントは3なのに、依存配列が空の関数は count=0 を表示します。エラーは出ずに値だけが以前のままになるので、気づきにくいのが特徴です。

ESLintが教えてくれる

eslint-plugin-react-hooks（7.1.1）の react-hooks/exhaustive-deps ルールを有効にすると、書き忘れを指摘してくれます。上と同じ形のコードにかけた実際の出力です。

stale.tsx
  6:64  warning  React Hook useCallback has a missing dependency: 'count'. Either include it or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setMessage' needs the current value of 'count'  react-hooks/exhaustive-deps

✖ 1 problem (0 errors, 1 warning)

直し方は3通り

2つ目の「更新関数の形」は、参照を保ったまま最新の値を使えるので、memo 済みの子に渡す関数と特に相性がよい書き方です。

// 依存配列は空のままで、常に最新の値から計算できる
const increment = useCallback(() => setCount((c) => c + 1), []);

React 19とReact Compilerで手書きのメモ化はどう変わるか

React Compilerとは

React Compilerは、ビルド時にコンポーネントを解析して、memo・useMemo・useCallback に相当する処理を自動で差し込むツールです。公式ドキュメントの紹介ページ（react.dev の React Compiler Introduction、今回開いて確認）では、安定版であること、React 17・18・19で使えること、Babel・Viteなどのビルドツールに対応していることが案内されています。React 19本体にアップグレードしただけで自動的にメモ化されるわけではなく、ビルドにコンパイラを追加したときに有効になります。

同じコードをコンパイラに通した結果

上の6パターンのソースを一切変えずに、babel-plugin-react-compiler 1.0.0 でコンパイルして同じ計測をしました。

plain         List再レンダリング  0 /20  commit 20  平均actualDuration 0.19ms
callbackOnly  List再レンダリング  0 /20  commit 20  平均actualDuration 0.18ms
memoOnly      List再レンダリング  0 /20  commit 20  平均actualDuration 0.18ms
both          List再レンダリング  0 /20  commit 20  平均actualDuration 0.15ms
inlineObject  List再レンダリング  0 /20  commit 20  平均actualDuration 0.16ms
fixedObject   List再レンダリング  0 /20  commit 20  平均actualDuration 0.13ms

何も付けていないパターン1が、手書きで両方そろえたパターン4と同じ結果になりました。 インラインのオブジェクトpropsも、コンパイラが参照を保つコードに変換するため、memo が無効になりません。

コンパイラが最適化を見送る書き方

コンパイラは、Reactのルールに沿っていると判断できないコンポーネントをエラーにせず、そのまま（最適化なしで）残します。今回の検証中に、実際に2種類の見送りが起きました。コンパイラのログ出力です。

1つ目は、ESLintのルールをコメントで無効化しているコンポーネントです。前の章の StalePanel に eslint-disable-next-line react-hooks/exhaustive-deps を付けたところ、次のように記録されました。

React Compiler has skipped optimizing this component because one or more React ESLint rules were disabled
React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior.
Found suppression `eslint-disable-next-line react-hooks/exhaustive-deps`

2つ目は、手書きの useCallback の依存配列が、コンパイラの推論と一致しない場合です。最初の版では state を const [, setSelected] = useState("") と、値を受け取らない形で書いていました。すると useCallback(..., []) を持つ4つのパネルが見送りになりました。

Existing memoization could not be preserved
React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `setSelected`, but the source dependencies were []. Inferred dependency not present in source

const [selected, setSelected] = useState("") と通常の形に直すと、すべてのパネルがコンパイルされ、上の表の結果になりました。手書きのメモ化が残っているコードほど、依存配列を正確に書いておくことがコンパイラ導入時の助けになります。

手書きが要らなくなるもの・残るもの

コンパイラを試す最小の設定

今回の検証で使ったBabelの設定です。プラグインは他の変換より先に実行されるよう、plugins の先頭に置きます。

// babel.config.mjs の例（今回は @babel/core の transformSync に同じ内容を渡して実行）
export default {
  plugins: [["babel-plugin-react-compiler", {}]],
  presets: [
    ["@babel/preset-typescript", {}],
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

npm i -D babel-plugin-react-compiler @babel/core @babel/preset-typescript @babel/preset-react

Viteや Next.js への組み込みは今回は未実行です。各ツールの手順は公式ドキュメントの案内に沿って設定してください。

自分のアプリで計測する手順

「効いているか」を確かめる方法を、手軽な順に並べます。

Profiler コンポーネントを使う最小の例です。

import { Profiler, type ProfilerOnRenderCallback } from "react";

const onRender: ProfilerOnRenderCallback = (id, phase, actualDuration) => {
  console.log(`${id} ${phase} ${actualDuration.toFixed(2)}ms`);
};

export function Measured({ children }: { children: React.ReactNode }) {
  return <Profiler id="list-area" onRender={onRender}>{children}</Profiler>;
}

開発時に StrictMode を使っていると、コンポーネントの関数は確認のために2回ずつ呼ばれます。回数を数えるときは、その分を差し引いて読むか、今回のように StrictMode なしで計測します。

つまずきやすい点と直し方

よくある質問

Q. useCallbackは意味がないと聞きました。本当ですか？ A. 受け取る側が memo されていない、あるいはEffectの依存にも使っていない場合は、今回の計測のとおり描画回数が変わりません（20回中20回のまま）。memo 済みの子に渡すときは0回になり、はっきり効果が出ます。「どこに渡すか」で意味が決まるフックです。

Q. すべてのコンポーネントをmemoで包んでおけば安心ですか？ A. 動作は変わりませんが、propsが毎回変わる子では比較の分だけ仕事が増え、コードも長くなります。描画が重い子、親が頻繁に更新される箇所から付けるのがおすすめです。React Compilerを入れている場合は、コンパイラに任せられます。

Q. useMemoとuseCallbackはどう使い分けますか？ A. 保ちたいものが関数ならuseCallback、それ以外の値（オブジェクト・配列・計算結果）ならuseMemoです。useCallback(fn, deps) は useMemo(() => fn, deps) と同じ意味なので、覚えるしくみは1つで済みます。

Q. React 19にしたら、既存のuseCallbackやmemoは外したほうがよいですか？ A. React 19にするだけでは自動のメモ化は入りません。React Compilerを追加した場合も、既存のメモ化はそのまま残して問題ありません。外す場合は、Profilerで回数を確かめながら少しずつ進めると安全です。

まとめ

• useCallbackは「関数の参照を保つ」、memoは「propsが同じなら子を省く」。子の再レンダリングを防ぐには2つをセットで使う。
• 片方だけでは20回中20回描画され、両方そろえると0回（約24ms → 約0.1ms）になった。
• インラインの関数・オブジェクト・配列は毎回新しい参照になり、memoが無効になる。 useMemoで包むか、コンポーネントの外に定数として出す。
• 依存配列の書き忘れは、エラーにならず以前の値を参照し続ける。 react-hooks/exhaustive-deps で検出でき、更新関数の形にすると依存自体を減らせる。
• React Compiler 1.0.0 に通すと、何も付けていないコードでも子の再レンダリングが0回になった。 新しいコードでは手書きのメモ化は原則不要になる。
• コンパイラは、ルール無効化コメントや依存配列の不一致があるコンポーネントを見送る。 見送られた箇所では手書きのメモ化が引き続き働く。
• 迷ったら、まず何も付けずに書き、Profilerで計測してから付ける。

参考

• React 公式ドキュメント「React Compiler – Introduction」（react.dev/learn/react-compiler/introduction、2026-10-03に閲覧）

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。