【React】useMemoとuseCallbackの違い！使い分け完全解説

PR Amazonのアソシエイトとして、ITナレッジライフは適格販売により収入を得ています。

記事の文字数：6,528

ReactのuseMemoとuseCallbackの違いと使い分けを初心者向けに徹底解説。「計算結果の値をキャッシュする」useMemoと「関数そのもの（参照）をキャッシュする」useCallbackの違い、React.memoとの併用、過剰なメモ化の落とし穴までコード例付きで分かりやすく紹介します。

公開日 2026/11/14

最終更新 2026/11/14

React

ITエンジニアにお勧めの本 ↗

ひと目でわかる！useMemo と useCallback の違い比較表

まずは、両者の違いを表で整理します。

項目	`useMemo`	`useCallback`
キャッシュ対象	関数の計算結果（値）	関数そのもの（関数オブジェクトの参照）
主な用途	CPUCPU [シーピーユー]Central Processing Unit。コンピュータの頭脳となる中央演算処理装置負荷の高い重い計算のスキップ、オブジェクト・配列の参照保持	子コンポーネントへ渡すコールバック関数の参照保持、`useEffect` の依存関係安定化、カスタムフックから返す関数の参照保持
戻り値	第1引数の関数が返した値（数値、文字列、オブジェクト、配列など）	第1引数に渡した関数そのもの
基本構文	`useMemo(() => computeValue(a, b), [a, b])`	`useCallback((e) => handleClick(e), [a, b])`
等価な書き換え	-	`useMemo(() => fn, deps)` と実質的に等価

React公式ドキュメントでは、useCallback(fn, deps) は useMemo(() => fn, deps) と実質的に等価であると説明されています。useMemo が関数を実行してその戻り値をキャッシュするのに対し、useCallback は渡された関数自体をキャッシュします。

useMemo の仕組みと具体的な使い方

まずは、計算結果の値をキャッシュする useMemo について詳しく見ていきましょう。

なぜ useMemo が必要なのか？

Reactの関数コンポーネントは、自身の state の更新や親コンポーネントの再レンダリングなどが発生するたびに、関数本体が上から下まで最初から再実行（再レンダリング）されます。

1
function ProductList({ products, filterText }) {
2
  // コンポーネントが再レンダリングされるたびに、この重い計算が毎回実行される！
3
  const filteredProducts = slowFilter(products, filterText);
4

5
  return <div>{/* 商品一覧の表示 */}</div>;
6
}

もし slowFilter が数千件・数万件のデータをループして集計・ソートするような重い処理だった場合、関係のない state（例えばページ内の検索以外の小さなモーダル開閉など）が変更されただけでも、毎回この重い計算が実行されて画面のカクつき（ジャンク）を引き起こします。

useMemo の基本構文

そこで useMemo を使うと、第2引数に指定した 依存配列の値が前回のレンダリング時から変化していなければ、Reactは原則として前回の計算結果を再利用 します。

ただし、useMemo はあくまでパフォーマンス最適化のための仕組みであり、 キャッシュの保持を永久に保証するものではありません 。開発中のファイル編集時や、初回マウント時にコンポーネントが Suspense によって中断された場合、あるいは将来的に React がキャッシュを破棄する新しい仕組みを導入した場合など、特定の理由でキャッシュが破棄されることもあるため、アプリケーションの正しい動作をメモ化のキャッシュに依存させないようにしましょう。

なお、React Hooks のルールに従い、useMemo はコンポーネントまたはカスタムフックのトップレベルで呼び出す必要があります。

1
import { useMemo } from "react";
2

3
function MyComponent({ a, b }) {
4
  const memoizedValue = useMemo(() => {
5
    // 重い計算処理
6
    return computeExpensiveValue(a, b);
7
  }, [a, b]); // a または b が変化したときに再計算される
8

9
  return <div>{memoizedValue}</div>;
10
}

[!NOTE] Strict Mode に関する注意点 Reactの開発環境で Strict Mode が有効になっている場合、useMemo に渡した計算関数は初回レンダリング時などに 意図的に2回呼び出される ことがあります。これは計算処理が純粋であることを確認するための開発時のチェックであり、本番環境では発生しません。そのため、開発環境で計算関数内のログが2回出力されても、必ずしもメモ化が失敗しているわけではありません。

useMemo の実践例（重いフィルタリング処理のスキップ）

以下は、数千件のアイテムからキーワード検索を行う実践的なコード例です。

1
import { useState, useMemo } from "react";
2

3
// わざと負荷をかけた重いフィルタリング関数の例
4
function slowFilterItems(items, query) {
5
  console.log("重いフィルタリング処理を実行中...");
6
  const startTime = performance.now();
7
  while (performance.now() - startTime < 100) {
8
    // 意図的に100msの遅延を発生させて重い計算を再現
9
  }
10
  return items.filter((item) =>
11
    item.name.toLowerCase().includes(query.toLowerCase())
12
  );
13
}
14

15
export function ItemSearch({ items }) {
16
  const [query, setQuery] = useState("");
17
  const [count, setCount] = useState(0);
18

19
  // query または items が変わったときだけ slowFilterItems を実行する
20
  const filteredItems = useMemo(() => {
21
    return slowFilterItems(items, query);
22
  }, [items, query]);
23

24
  return (
25
    <div>
26
      <input
27
        type="text"
28
        value={query}
29
        onChange={(e) => setQuery(e.target.value)}
30
        placeholder="アイテムを検索..."
31
      />
32
      {/* カウントボタンを押しても filteredItems の重い再計算は走らない */}
33
      <button onClick={() => setCount((prev) => prev + 1)}>
34
        無関係なカウンター: {count}
35
      </button>
36

37
      <ul>
38
        {filteredItems.map((item) => (
39
          <li key={item.id}>{item.name}</li>
40
        ))}
41
      </ul>
42
    </div>
43
  );
44
}

上記のコードでは、ユーザーが「無関係なカウンター」ボタンを何度クリックしても、query と items が変わっていないため slowFilterItems はスキップされ、前回のキャッシュ値が再利用されます。

※このコードは useMemo の動作を視覚的に確認するためのデモ用コードとして、意図的に100msの処理時間とログ出力を含めています。実際のアプリケーションでは、データ量の多いフィルタリングやソートなど実測で時間がかかる処理を対象とし、 計算関数は純粋に保ち、ログ出力や時間経過に依存する処理などの副作用を含めない ようにしてください。

useCallback の仕組みと具体的な使い方

次に、関数の参照をキャッシュする useCallback について見ていきましょう。

なぜ useCallback が必要なのか？（関数の参照等価性）

JavaScriptでは、関数は オブジェクトの一種 として扱われます。プリミティブ値（数値や文字列）とは異なり、関数やオブジェクトを新しく生成すると、それぞれ 異なる参照 を持つ値になります（値と参照の基本については JavaScriptのvar・let・constの違いやスタック領域とヒープ領域の違いも参照してください）。

そのため、処理内容がまったく同じ関数であっても、別々に生成された関数同士を === で比較すると false になります。以下の検証コードを見てください。

1
// 見た目は全く同じ関数でも、新しく作成されると参照が異なる
2
const fnA = () => console.log("hello");
3
const fnB = () => console.log("hello");
4

5
console.log(fnA === fnB); // false

Reactのコンポーネント内にインラインで関数を書くと、 レンダリングのたびに関数が新しく生成 されます。

1
function Parent() {
2
  const [count, setCount] = useState(0);
3

4
  // Parent が再レンダリングされるたびに、handleClick は「全く新しい関数」として再生成される
5
  const handleClick = () => {
6
    console.log("クリックされました");
7
  };
8

9
  return <Child onClick={handleClick} />;
10
}

通常の HTMLHTML [エイチティーエムエル]HyperText Markup Language。Webページの構造を記述する言語要素（<button> など）に関数を渡すだけであれば、関数が再生成されてもブラウザにとって大きな問題はありません。しかし、 子コンポーネントへ関数を props として渡す場合 や、 useEffect の依存配列 に関数を渡す場合に、不要な再実行や再描画の問題が発生します。

useCallback の基本構文

useCallback は、依存配列の値が変化しない限り、 前回のレンダリング時に返された関数と同じ参照 を返します（useMemo と同様、キャッシュの保持を絶対的に保証するものではなく、パフォーマンス最適化のための仕組みです）。

なお、コンポーネントの再レンダリング時には、第1引数に記述した関数式自体は評価されます。useCallback は 関数の生成そのものを防ぐのではなく、Reactが返す関数の参照をキャッシュする仕組み です。

1
import { useCallback } from "react";
2

3
function MyComponent({ a, b }) {
4
  const memoizedCallback = useCallback(() => {
5
    doSomething(a, b);
6
  }, [a, b]); // a または b が変化しない限り、前回の関数の参照を再利用する
7

8
  return <Child onAction={memoizedCallback} />;
9
}

React.memo との組み合わせ（子コンポーネントの無駄な再レンダリング防止）

useCallback が効果を発揮する代表的な場面は、 React.memo でメモ化された子コンポーネント に対話用のコールバック関数を props として渡すときです。

通常、親コンポーネントが再レンダリングされると、その配下にある子コンポーネントも再レンダリングの対象になります。

ただし、子コンポーネントを React.memo でラップし、props に変更がなければ、React は子コンポーネントの再レンダリングをスキップできます（なお、React.memo は再レンダリングを必ず防ぐ保証ではなく、パフォーマンス最適化のための仕組みです。また、子コンポーネント自身の state や参照している Context が変化した場合は再レンダリングされます）。

その際、親から渡される関数やオブジェクトが毎回新しい参照になっていると、props が変更されたと判定され、メモ化の効果が得られなくなる場合があります。

1
import { useState, useCallback, memo } from "react";
2

3
// 子コンポーネントを React.memo でラップしてメモ化
4
const ExpensiveChild = memo(function ExpensiveChild({ onReset }) {
5
  console.log("ExpensiveChild がレンダリングされました");
6
  return <button onClick={onReset}>リセット</button>;
7
});
8

9
export function ParentDashboard() {
10
  const [count, setCount] = useState(0);
11
  const [text, setText] = useState("");
12

13
  // useCallback で返される関数の参照をキャッシュする
14
  const handleReset = useCallback(() => {
15
    setText("");
16
  }, []); // 依存配列が空なので、再レンダリング時も原則として前回の関数参照が返される
17

18
  return (
19
    <div>
20
      <input value={text} onChange={(e) => setText(e.target.value)} />
21
      <button onClick={() => setCount((c) => c + 1)}>カウント: {count}</button>
22

23
      {/* handleReset の参照が変わらないため、count を変更しても ExpensiveChild の再描画をスキップできる */}
24
      <ExpensiveChild onReset={handleReset} />
25
    </div>
26
  );
27
}

もしここで handleReset に useCallback を使わずに普通の関数として定義していた場合、親コンポーネントで count を増やすたびに ExpensiveChild も毎回再レンダリングされてしまいます。

[!IMPORTANT] 子コンポーネントの再レンダリング防止を目的として useCallback を使う場合、 受け取り側の子コンポーネントが React.memo 等でメモ化されていること が前提になります。メモ化されていない通常の子コンポーネントに関数を渡すだけであれば、useCallback を使っても子コンポーネントの再レンダリングはスキップされません。

実践！useMemo と useCallback の使い分けフローチャート

どちらを使うべきか迷ったときは、以下の判断フローに従ってください。

flowchart TD Start["最適化したい処理がある"] --> Q1{"キャッシュしたい対象は何か？"} Q1 -->|"計算した「値」（配列、集計値、オブジェクト）"| Q2{"その計算は本当に重いか？
または依存配列の参照等価性が必要か？"} Q1 -->|"「関数」そのもの（イベントハンドラ等）"| Q3{"その関数の参照を安定させる必要があるか？"} Q2 -->|Yes| A1["useMemo を使用する"] Q2 -->|No: 単純な足し算や文字列結合| A2["メモ化は不要（通常の変数）"] Q3 -->|"React.memo化した子コンポーネント
useEffectの依存関係から関数を除去できない
カスタムフックの戻り値"| A3["useCallback を使用する"] Q3 -->|"通常のHTMLタグやメモ化していない子"| A4["基本的にメモ化は不要（インライン関数）"]

使い分けの典型的なシチュエーション

1. useMemo を使うべき場面

数千件のリストのソート、フィルタリング、複雑なデータ変換
子コンポーネントに渡すオブジェクトや配列の参照を安定させたいとき
カスタムフックの戻り値としてオブジェクトを返すとき （消費側の useEffect 依存配列を安定させるため）

2. useCallback を使うべき場面

React.memo でラップされた子コンポーネントに関数を props として渡すとき
useEffect や別のフックの依存配列に関数を渡す必要があるとき
カスタムフックから返す関数の参照を安定させ、利用側のコンポーネントがメモ化しやすいようにしたいとき

1
// カスタムフックから返す関数を useCallback でラップする例
2
function useRouter() {
3
  const { dispatch } = useContext(RouterStateContext);
4

5
  const navigate = useCallback((url) => {
6
    dispatch({ type: "navigate", url });
7
  }, [dispatch]);
8

9
  return { navigate };
10
}

補足：useEffect 内で使う関数は「エフェクト内部への移動」も検討する

なお、useEffect の依存配列に関数を指定する場合、 必ずしも useCallback が必要とは限りません 。エフェクト内でしか使用しない関数であれば、useEffect の内部に直接関数を定義することで、useCallback を使わずに依存関係をシンプルにできる場合があります。

1
// ❌ useCallback で関数の参照を固定して依存配列に渡す例（やや冗長）
2
function ChatRoom({ roomId }) {
3
  const createOptions = useCallback(() => {
4
    return {
5
      serverUrl: "https://localhost:1234",
6
      roomId,
7
    };
8
  }, [roomId]);
9

10
  useEffect(() => {
11
    const options = createOptions();
12
    const connection = createConnection(options);
13
    connection.connect();
14
    return () => connection.disconnect();
15
  }, [createOptions]);
16
}
17

18
// ⭕ useEffect の内部に関数を定義する例（useCallback が不要でシンプル）
19
function ChatRoom({ roomId }) {
20
  useEffect(() => {
21
    function createOptions() {
22
      return {
23
        serverUrl: "https://localhost:1234",
24
        roomId,
25
      };
26
    }
27

28
    const options = createOptions();
29
    const connection = createConnection(options);
30
    connection.connect();
31
    return () => connection.disconnect();
32
  }, [roomId]);
33
}

やってはいけない！メモ化のアンチパターンと注意点

「メモ化すればするほどアプリが速くなる」と勘違いしがちですが、実際には メモ化自体にも管理コストが存在します 。不要なメモ化はコードの複雑化や可読性の低下を招くため、避けるべきパターンを押さえておきましょう。

アンチパターン1: 単純な計算をすべて useMemo で囲む

以下のような単純な計算に useMemo を使うのは代表的なアンチパターンです。

1
// ❌ やってはいけない例：過剰なメモ化
2
const fullName = useMemo(() => `${firstName} ${lastName}`, [firstName, lastName]);
3
const totalPrice = useMemo(() => price * quantity, [price, quantity]);
4

5
// ⭕ 正しい例：単なる計算としてそのまま書く
6
const fullName = `${firstName} ${lastName}`;
7
const totalPrice = price * quantity;

文字列の結合や四則演算のような非常に軽い処理では、メモ化によって得られる パフォーマンス上のメリットはほとんどありません 。

一方で、依存配列の管理や比較（Object.is）などの処理が追加されるため、不要なメモ化はコードの複雑化や可読性の低下につながります。計算処理が十分に軽い場合は、通常の変数として計算する方がシンプルです。

アンチパターン2: メモ化していないコンポーネントへの useCallback

React.memo などでメモ化されていない子コンポーネントや、通常の <button> 要素に関数を渡すだけであれば、一般的に useCallback による参照の固定は必要ありません。

1
// ❌ 意味のない最適化
2
const handleClick = useCallback(() => {
3
  setCount((c) => c + 1);
4
}, []);
5

6
// 通常の HTML 要素（<button>）や React.memo されていない子コンポーネントでは、
7
// 関数の参照を固定しても再レンダリング防止の効果はない
8
return <button onClick={handleClick}>クリック</button>;

この場合、useCallback の有無にかかわらず <button> の描画処理や通常の子コンポーネントの再レンダリングには影響しません。ただし、関数が別のフックの依存配列に含まれている場合や、カスタムフックの戻り値として関数を公開する場合などは、参照を安定させる意味があります。

アンチパターン3: 依存配列の指定漏れによる Stale State（古い値の参照）

メモ化フックで代表的なバグの原因となるのが、 依存配列の指定漏れ です。

1
function Timer() {
2
  const [seconds, setSeconds] = useState(0);
3

4
  // ❌ 依存配列に seconds がないため、初期値 0 を掴み続けてしまう
5
  const logSeconds = useCallback(() => {
6
    console.log(`現在の秒数: ${seconds}`);
7
  }, []); // 警告: React Hook useCallback has a missing dependency: 'seconds'
8

9
  return (
10
    <div>
11
      <button onClick={() => setSeconds((s) => s + 1)}>秒数を進める</button>
12
      <button onClick={logSeconds}>秒数をログ出力</button>
13
    </div>
14
  );
15
}

「秒数を進める」ボタンでコンポーネントが再レンダリングされて seconds が増えても、useCallback のキャッシュが更新されないため、logSeconds は初回作成時の seconds = 0 のクロージャを参照し続けます。これを Stale Closure（古いクロージャ） と呼びます。

必ず ESLintESLint [イーエスリント]JavaScriptやTypeScriptのコードに潜むバグや不要な記述をルールに沿って検出する静的解析ツールの公式ルール eslint-plugin-react-hooks（react-hooks/exhaustive-deps）を導入し、この例のように値を参照する場合は依存配列に [seconds] を正しく設定しましょう（なお、state の更新のみを行う関数であれば setSeconds((s) => s + 1) のような関数型更新を使うことで依存を減らせます）。

【補足】React 19 と React Compiler 時代のメモ化

現在、Reactエコシステムでは React Compiler（コードネーム: React Forget） の導入が進んでいます。

React Compiler は、ビルド時にコードを解析し、コンポーネントや値を 自動的に最適な単位でメモ化 してくれるツールです。2025年10月に安定版の v1.0 がリリースされました。React 本体とは別のビルドツール（BabelBabel [バベル]最新のJavaScriptコードを古いブラウザでも動作するコードに変換するトランスパイラプラグイン等）として導入するもので、React 19（ランタイム組み込み済み）での利用が推奨されていますが、react-compiler-runtime パッケージを導入しコンパイラのターゲットバージョンを指定すれば React 17 / 18 でも利用できます。

React Compiler が有効化されたプロジェクトでは、開発者が手動で useMemo や useCallback、React.memo を記述する必要性は大幅に減ります。

ただし、React Compiler による最適化の対象外となるコードや、コンパイラが適切に最適化できないケースでは、引き続き手動のメモ化フックが役立つ場合があります。また、React Compiler を導入する前から手動でメモ化しているコードについては、動作やパフォーマンスを確認しながら段階的に移行することが重要です。

そのため、2026年現在の実務現場でも、以下の理由から useMemo と useCallback の知識は引き続き重要です。

既存の数多くのプロジェクトやライブラリコードの保守・読解に不可欠であること
React Compiler を導入していない環境や移行中の現場が依然として多いこと
「何が原因で不要な再レンダリングが起きるのか」という React のレンダリング原理を理解する上で不可欠な基礎概念であること

まとめ

最後に、useMemo と useCallback の要点をまとめます。

useMemo : 計算結果の 「値」 をキャッシュする。重い集計・ソート処理のスキップや、オブジェクトの参照安定化に使う
useCallback : 返される 「関数の参照」 をキャッシュする（関数の生成自体を防ぐわけではない）。useMemo(() => fn, deps) と実質的に等価なショートハンド
キャッシュの性質 : メモ化はあくまでパフォーマンス最適化の仕組みであり、キャッシュの永久保持が保証されるものではない
有効な場面 : React.memo された子コンポーネントへの関数渡し、useEffect 等の依存配列での参照安定化（エフェクト内関数で代替できない場合）、カスタムフックから返す関数の参照保持
アンチパターン : 非常に軽い計算や、メモ化されていない要素・子コンポーネントへの不要なメモ化は可読性を損なう
依存配列の厳守 : ESLint の exhaustive-deps ルールに従い、古いクロージャ（Stale Closure）のバグを防ぐ