Mid-level (2-5 years)React
What is the difference between useMemo and useCallback in React?
Quick answer
useMemo caches the result of a calculation, while useCallback caches a function definition; both only recompute when their dependencies change.
useMemo(() => compute(a, b), [a, b]) returns the cached value. useCallback(fn, deps) is shorthand for useMemo(() => fn, deps): it returns the same function instance between renders.
Neither makes your app faster by default; each adds its own cost. Use useMemo for genuinely expensive calculations, and use useCallback mainly when the function is passed to a child wrapped in React.memo or is a dependency of another hook. A stable function reference is useless if the child is not memoized, since the child re-renders with its parent anyway.
const visible = useMemo(
() => todos.filter(t => t.status === filter),
[todos, filter]
);
const handleSelect = useCallback((id) => setSelected(id), []);
const Row = React.memo(function Row({ item, onSelect }) { /* ... */ });
<Row item={item} onSelect={handleSelect} />Key points
- useMemo returns a value, useCallback returns a function
- Both depend on a dependency array
- Measure before optimising; memoisation has a cost