What is the difference between useMemo and useCallback?

Q: What is the difference between useMemo and useCallback?

**Target Audience:** Engineers preparing for React interviews — assumes hooks and re-renders. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The recompute and identity counts in section 3 were measured across three real renders on React 19.2.8. ## 1. Why This Even Matters — A Story First Two different things get cached in a kitchen. The **stock** — simmered for hours — is made once and kept, because remaking it is expensive. The **house knife** is kept not because knives are expensive, but because everyone has learned where it lives; hand out a different knife each day and nobody knows where anything is. useMemo caches the stock: an expensive result. useCallback caches the knife: a thing whose **identity** matters more than its cost. ## 2. The Core Idea 📌 **Interview term: useMemo ** — caches the **value returned** by calling a function. Rea

The problem

Question presented to candidate: "What is the difference between useMemo and useCallback, and when is each actually worth it?"

What a strong answer should cover:

useMemo(fn, deps) caches the result of calling fn. useCallback(fn, deps) caches the function itself.
They are the same mechanism: useCallback(fn, deps) is exactly useMemo(() => fn, deps).
Both compare dependencies with Object.is and recompute only when one changes.
Two distinct reasons to use either: avoiding an expensive computation, and preserving referential identity so a memoised child or a dependency array does not see a change.
The identity reason is by far the more common one in practice.
Neither is free: both add a dependency array to maintain and a comparison on every render. Applied everywhere they are a net loss.
They only pay off in specific conditions — a measured expensive computation, or a stable reference genuinely consumed by React.memo, a dependency array, or a context value.
The React Compiler automates this class of memoisation, making manual use largely redundant in compiled code.

Clarifying questions expected:

"Am I trying to avoid a computation, or preserve an identity?" — the two motivations lead to different hooks.
"Have we profiled? Is this actually the bottleneck?"

Code / implementation expected: Yes — both hooks, with visible recompute and identity counts.

hooks
performance
optimization

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for React interviews — assumes hooks and re-renders. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The recompute and identity counts in section 3 were measured across three real renders on React 19.2.8.

1. Why This Even Matters — A Story First

Two different things get cached in a kitchen. The stock — simmered for hours — is made once and kept, because remaking it is expensive. The house knife is kept not because knives are expensive, but because everyone has learned where it lives; hand out a different knife each day and nobody knows where anything is.

useMemo caches the stock: an expensive result. useCallback caches the knife: a thing whose identity matters more than its cost.

2. The Core Idea

📌 Interview term: useMemo — caches t

The solution is hidden so you can try first

6 min read · 10 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactRecompute counts and function identities, with and without memoisation

Open in playground

import { useState, useMemo, useCallback, memo, useRef } from "react";

const stats = { computedMemo: 0, computedPlain: 0 };

// A memoised child, so function identity actually gets checked.
let childRenders = 0;
const Child = memo(function Child({ onPick, label }) {
  childRenders++;
  return (
    <p style={{ margin: "4px 0", fontSize: 14 }}>
      <code style={{ display: "inline-block", minWidth: 180 }}>{label}</code>
      child renders: <strong>{childRenders}</strong>{" "}
      <button onClick={() => onPick(1)}>pick</button>
    </p>
  );
});

const ITEMS = ["delta", "alpha", "charlie", "bravo"];

export default function App() {
  const [tick, setTick] = useState(0);
  const [picked, setPicked] = useState("none");

  // Identities seen across renders — a Set counts the distinct ones.
  const memoValues = useRef(new Set());
  const plainValues = useRef(new Set());
  const stableFns = useRef(new Set());
  const freshFns = useRef(new Set());

  // useMemo — caches the RESULT. Recomputes only when ITEMS changes (never).
  const sortedMemo = useMemo(() => {
    stats.computedMemo++;
    return ITEMS.toSorted();
  }, []);

  // No memo — recomputed and reallocated on every single render.
  stats.computedPlain++;
  const sortedPlain = ITEMS.toSorted();

  // useCallback — caches the FUNCTION. One identity for the component lifetime.
  const stablePick = useCallback((id) => setPicked("stable " + id), []);
  // Fresh arrow — a new identity every render, so memo on the child cannot help.
  const freshPick = (id) => setPicked("fresh " + id);

  memoValues.current.add(sortedMemo);
  plainValues.current.add(sortedPlain);
  stableFns.current.add(stablePick);
  freshFns.current.add(freshPick);

  const td = { padding: "3px 14px 3px 0", fontFamily: "ui-monospace, monospace", fontSize: 13 };

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 540 }}>
      <p>
        <button onClick={() => setTick((t) => t + 1)}>re-render ({tick})</button>{" "}
        <span style={{ color: "#666", fontSize: 13 }}>picked: {picked}</span>
      </p>

      <table style={{ borderCollapse: "collapse", marginBottom: 12 }}>
        <tbody>
          <tr><td style={td}>useMemo — times computed</td><td style={{ ...td, color: "#161" }}>{stats.computedMemo}</td></tr>
          <tr><td style={td}>no memo — times computed</td><td style={{ ...td, color: "#a33" }}>{stats.computedPlain}</td></tr>
          <tr><td style={td}>useMemo — distinct values</td><td style={{ ...td, color: "#161" }}>{memoValues.current.size}</td></tr>
          <tr><td style={td}>no memo — distinct values</td><td style={{ ...td, color: "#a33" }}>{plainValues.current.size}</td></tr>
          <tr><td style={td}>useCallback — distinct fns</td><td style={{ ...td, color: "#161" }}>{stableFns.current.size}</td></tr>
          <tr><td style={td}>fresh arrow — distinct fns</td><td style={{ ...td, color: "#a33" }}>{freshFns.current.size}</td></tr>
        </tbody>
      </table>

      <Child onPick={stablePick} label="memo child + useCallback" />

      <p style={{ color: "#666", fontSize: 13 }}>
        Press re-render a few times. The memoised value and the stable function
        each stay at 1 distinct instance; the unmemoised ones climb with every
        render. The child stays at 1 render because its function prop never
        changes identity — swap in the fresh arrow and it would climb too.
      </p>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.