useMemo vs useCallback: What's the Real Difference?
useMemo and useCallback are often confused. Here is the real difference and how to choose.
useMemo vs useCallback: What's the Real Difference?
useMemo and useCallback are both memoization hooks and are often confused. Here is the real difference and how to choose.
The Core Difference
useMemo memoizes a value. It runs a function and caches the result. useCallback memoizes a function reference. It does not run the function; it just keeps the same reference.
In Practice
useMemo is for expensive computations: sort a list, derive a value, compute a layout. useCallback is for stable function references: pass a handler to a memoized child.
They Are Related
useCallback is essentially useMemo for a function. You can think of useCallback(fn, deps) as equivalent to useMemo(() => fn, deps), but useCallback is more direct and readable for this case.
When to Use useMemo
When a computation is expensive and would otherwise run on every render. Also to keep an object or array reference stable, similar to useCallback for functions.
When to Use useCallback
When you pass a function as a prop to a child wrapped in React.memo, to prevent the child from re-rendering just because the parent created a new function. Also for handlers used in effects to avoid re-running the effect.
The Common Mistake
Using them interchangeably or wrapping everything in both. Each has a clear purpose. Measure first, then use the right one for the measured problem.
The Takeaway
useMemo memoizes a value, useCallback memoizes a function reference. Use useMemo for expensive computations or stable object references, useCallback for stable function references passed to memoized children. Measure first.
useMemo memoizes a value by running a function and caching the result. useCallback memoizes a function reference without running it. Use useMemo for expensive computations and useCallback for stable function references passed to memoized children.
No, though they are related. useCallback is essentially useMemo for a function reference. Use useCallback when you need a stable function, and useMemo when you need to cache a computed value. They have distinct purposes.
When you have an expensive computation, like sorting a list or deriving a value, that would otherwise run on every render. Also when you want to keep an object or array reference stable for memoized children.
When you pass a function as a prop to a child wrapped in React.memo, or when a handler is used in a child's effect. The stable function reference prevents unnecessary re-renders and effect re-runs.
Because memoization is not free. Each adds overhead and complexity. Measure with the Profiler first, then use the right hook only at the measured bottleneck, not preemptively across the whole codebase.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.