useMemo vs useCallback: What Is the Difference?

Learn how useMemo memoizes values and useCallback memoizes function references, with a real React code example.

mediumQ72 of 224 in Web Development Est. time: 5 minsLast updated: July 2026

Expected Interview Answer

useMemo memoizes the returned value of an expensive computation so it is only recalculated when its dependencies change, while useCallback memoizes the function reference itself so a new function identity is not created on every render.

Both hooks accept a dependency array and skip recomputation when none of the listed values have changed since the last render, but they memoize different things. useMemo runs the function you pass it and caches whatever value that function returns — useful for avoiding an expensive recalculation like filtering a large array or a costly derived value. useCallback does not run the function you pass it at all; it simply returns the same function reference across renders as long as dependencies are unchanged, which matters because JavaScript creates a brand-new function object on every render by default, and that new reference can defeat referential-equality checks like React.memo or break dependency arrays of effects that reference the function. In fact useCallback(fn, deps) is functionally equivalent to useMemo(() => fn, deps) — useCallback is really just a convenience wrapper around useMemo specialized for the common case of memoizing functions passed as props or effect dependencies. Both are pure performance optimizations, not correctness tools, and reaching for them without a measured need (like an expensive computation or a memoized child that would otherwise re-render) adds complexity without benefit.

useMemo avoids recomputing expensive derived values on every render
useCallback preserves function reference identity for memoized children or effect dependencies
Both use the same dependency-array invalidation model, keeping mental overhead low
useCallback(fn, deps) is literally useMemo(() => fn, deps) under the hood

AI Mentor Explanation

useMemo is like a statistician who recalculates a team’s net run rate only when new match data comes in, caching the number so it is not recomputed every time someone asks for it during the broadcast. useCallback is like issuing the same laminated card with the ground rules printed on it to every new umpire, instead of printing a fresh card for each one even though the rules have not changed, so umpires comparing cards can tell at a glance they are working from the identical rule set. One caches a computed number, the other caches a reference so equality checks still work. Both skip unnecessary work, but they are caching different kinds of things.

Step-by-Step Explanation

Step 1
React re-renders the component
A state or prop change triggers a new render, which would normally recreate every inline value and function.
Step 2
useMemo compares dependencies
If the dependency array is unchanged, useMemo skips re-running its function and returns the cached value.
Step 3
useCallback compares dependencies
If unchanged, useCallback returns the same function reference from the previous render instead of a new closure.
Step 4
Downstream consumers benefit
Memoized children (React.memo) or effect dependency arrays relying on referential equality skip unnecessary re-renders/re-runs.

What Interviewer Expects

Clear statement that useMemo caches a value, useCallback caches a function reference
Mention that useCallback(fn, deps) === useMemo(() => fn, deps)
A concrete scenario: expensive computation vs stable prop for React.memo child
Framing both as performance optimizations, not correctness guarantees

Common Mistakes

Saying they are “basically the same” without explaining the value-vs-reference distinction
Reaching for useMemo/useCallback everywhere without a measured performance need
Forgetting that an incorrect/missing dependency causes stale values or stale closures
Not connecting useCallback to its main use case: stabilizing props for React.memo children

Best Answer (HR Friendly)

“useMemo caches the result of a calculation so it is not redone on every render, while useCallback caches the function itself so it keeps the same identity across renders. I use useMemo for something expensive to compute, like filtering a big list, and useCallback when I am passing a function down to a memoized child component and want to avoid causing it to re-render just because a new function object was created.”

Code Example

useMemo for an expensive value, useCallback for a stable child prop

const MemoChild = React.memo(function MemoChild({ onSelect }) {
  console.log('MemoChild rendered')
  return <button onClick={onSelect}>Select</button>
})

function ProductList({ products, filterText }) {
  // useMemo: caches the computed filtered array
  const filtered = useMemo(
    () => products.filter(p => p.name.includes(filterText)),
    [products, filterText]
  )

  // useCallback: keeps the same function reference so MemoChild
  // does not re-render just because ProductList re-rendered.
  const handleSelect = useCallback(() => {
    console.log('selected')
  }, [])

  return (
    <div>
      {filtered.map(p => <div key={p.id}>{p.name}</div>)}
      <MemoChild onSelect={handleSelect} />
    </div>
  )
}

Follow-up Questions

Why does an inline arrow function passed as a prop defeat React.memo without useCallback?
What happens if you omit a dependency that useMemo/useCallback actually relies on?
When is useMemo/useCallback overhead not worth it compared to just recomputing?
How does React 19 automatic compiler-based memoization change when you need these hooks manually?

MCQ Practice

1. What does useCallback(fn, deps) return?

2. useCallback(fn, deps) is functionally equivalent to which useMemo call?

3. What is the primary use case for useCallback?

Flash Cards

1 / 4

useMemo vs useCallback: What Is the Difference?

Expected Interview Answer

AI Mentor Explanation

Step-by-Step Explanation

React re-renders the component

useMemo compares dependencies

useCallback compares dependencies

Downstream consumers benefit