useMemo vs useCallback in React
useMemo vs useCallback explained: one caches a computed value, the other a function. Learn when to use each, their equivalence and interview-ready examples.
Expected Interview Answer
useMemo memoizes the value returned by a function, while useCallback memoizes the function itself — both skip work between renders based on a dependency array, but one caches a result and the other caches a callback.
They solve the same underlying problem of preserving something across renders, and they are closely related: useCallback(fn, deps) is exactly useMemo(() => fn, deps). Reach for useMemo when you have an expensive calculation or need a stable object/array reference; reach for useCallback when you need a stable function reference to pass to a React.memo child or another hook. Both are performance optimizations, not correctness guarantees, and both re-run only when their dependencies change.
- Clear rule: useMemo for values, useCallback for functions
- Both stabilize references to prevent re-renders
- Both use the same dependency-array mechanics
- Interchangeable via useMemo(() => fn, deps)
- Help React.memo children skip unnecessary work
AI Mentor Explanation
Think of a team's analytics kit. useMemo is like caching the computed run-rate chart — the finished number you display. useCallback is like keeping the same play-calling routine handy to reuse. One stores the result of the analysis; the other stores the method itself, and both are refreshed only when the match situation truly changes.
Step-by-Step Explanation
Step 1
Ask what you are caching
If it is a computed value or a stable object/array, use useMemo; if it is a function, use useCallback.
Step 2
Write the memo
useMemo(() => compute(a), [a]) for a value; useCallback((x) => handle(x, a), [a]) for a function.
Step 3
List dependencies honestly
Both hooks re-run when a dependency changes, so include every reactive value the code reads.
Step 4
Pair with a consumer that compares identity
React.memo children or hook dependency arrays are what make the stable reference pay off.
Step 5
Profile the impact
Keep the optimization only if it measurably reduces work; otherwise remove it to cut complexity.
What Interviewer Expects
- Value vs function: the core distinction
- The equivalence useCallback(fn, deps) === useMemo(() => fn, deps)
- Correct scenarios for each hook
- Understanding both are optimizations, not guarantees
- Awareness that both depend on referential equality
Common Mistakes
- Saying they are interchangeable in all cases without nuance
- Using useMemo to memoize a function you pass down
- Using useCallback to cache a computed value
- Forgetting both need a downstream identity comparison to help
- Adding either everywhere without measuring
Best Answer (HR Friendly)
“Both are React tools that remember something between screen updates so work isn't repeated. useMemo remembers the answer to a calculation, while useCallback remembers a function; you pick based on whether you're caching a result or an action.”
Code Example
import { useMemo, useCallback, useState } from 'react'
function Dashboard({ orders }) {
const [filter, setFilter] = useState('all')
// useMemo -> caches a VALUE (the filtered result)
const visible = useMemo(() => {
return orders.filter((o) => filter === 'all' || o.status === filter)
}, [orders, filter])
// useCallback -> caches a FUNCTION (stable handler)
const onSelect = useCallback((id) => {
console.log('selected', id)
}, [])
return visible.map((o) => (
<button key={o.id} onClick={() => onSelect(o.id)}>
{o.id}
</button>
))
}Follow-up Questions
- Can you replace useCallback entirely with useMemo?
- When would useMemo be the wrong choice?
- Do these hooks guarantee a value is never recomputed?
- How do they each interact with React.memo?
- What is the cost of overusing memoization hooks?
MCQ Practice
1. What is the key difference between useMemo and useCallback?
useMemo memoizes the result of a function; useCallback memoizes the function itself.
2. useCallback(fn, deps) is equivalent to:
useCallback is just useMemo returning the function itself instead of the function's result.
3. Which should you use to keep an expensive computed array stable?
An expensive computed value or stable array reference is exactly what useMemo is designed to cache.
Flash Cards
useMemo caches...? — The value returned by a function, recomputed only when dependencies change.
useCallback caches...? — The function itself, keeping a stable reference until dependencies change.
How are they related? — useCallback(fn, deps) equals useMemo(() => fn, deps).
Are they correctness guarantees? — No — both are performance optimizations React may discard.