useMemo vs useCallback — When Each Actually Matters

The plain-language idea

useMemo and useCallback are close enough in shape that people reach for them interchangeably, but they solve two genuinely different problems. useMemo(fn, deps) skips recomputing a value — you're avoiding real computational work. useCallback(fn, deps) skips creating a new function reference — there's no computation being avoided at all, since defining a function is nearly free; what you're preserving is identity, so something downstream that compares by reference (React.memo, a useEffect dependency array) doesn't see a "change" that isn't real.

That distinction is the entire decision: ask whether you're avoiding expensive work, or avoiding a reference that would otherwise defeat something else's comparison. If it's neither, you don't need either hook.

See it in a real thing: two call sites that look similar and aren't

function ProductList({ products, taxRate }) {
  // useMemo: avoiding a real, potentially expensive recomputation
  const total = useMemo(
    () => products.reduce((sum, p) => sum + p.price * (1 + taxRate), 0),
    [products, taxRate]
  );

  // useCallback: avoiding a *reference change*, not computation —
  // this only matters because Row below is wrapped in React.memo
  const handleSelect = useCallback((id) => {
    console.log("selected", id);
  }, []);

  return (
    <>
      <p>Total: {total}</p>
      {products.map((p) => (
        <Row key={p.id} product={p} onSelect={handleSelect} />
      ))}
    </>
  );
}

const Row = React.memo(function Row({ product, onSelect }) {
  return <li onClick={() => onSelect(product.id)}>{product.name}</li>;
});

total's computation genuinely costs something proportional to products.length — recomputing it every render, on every keystroke elsewhere in the app, is wasted CPU work with a real, measurable cost. handleSelect costs nothing to create — a function literal is cheap. It's memoized purely so Row, wrapped in React.memo, keeps seeing the same onSelect reference across renders and its shallow prop comparison actually finds a match. Delete React.memo from Row and useCallback here stops doing anything useful at all — there'd be nothing downstream comparing references anymore.

What people usually miss

Watch out

• useCallback(fn, deps) is really just useMemo(() => fn, deps). They're built on the same underlying mechanism — useCallback is the specific, more ergonomic case of memoizing a function value instead of a computed one. Knowing this makes the "which one do I reach for" question answer itself: are you memoizing a value, or specifically a function?
• A useEffect dependency is the other real reason to reach for useCallback. If a function is created fresh every render and used inside another component's useEffect deps, that effect re-fires every render — wrapping the function in useCallback with the right deps is what breaks that loop, with no React.memo involved at all.
• Neither hook is free. Both store a dependency array and compare it every render — for a total that's three additions or a handleSelect with no dependencies to check, the comparison can cost more than just redoing the trivial work would have.
• The dependency array has to be correct either way. Both hooks trust you to list every value the function or computation actually closes over — get it wrong and you get a stale closure, the identical bug either hook is equally capable of introducing.

The genealogy: same comparison, different currency

The memoization lesson covers the shared mechanism underneath both hooks — comparing a dependency array by reference, skipping work if it hasn't changed — and the specific trap of a fresh reference silently defeating React.memo. This lesson narrows in on the decision underneath that: useMemo is for when the work itself is the cost, useCallback is for when only the reference needs to survive for something else's comparison to succeed.