useMemo vs useCallback vs React.memo: When to Use Each

useMemo vs useCallback vs React.memo: When to Use Each

useMemo, useCallback, and React.memo all relate to avoiding unnecessary work, but they do different things. Here is what each does and when to use each.

useMemo

useMemo memoizes a computed value. It returns the cached result unless a dependency changed. Use it when a computation is expensive and would otherwise run on every render.

useCallback

useCallback memoizes a function, keeping the same reference across renders unless a dependency changed. Use it when you pass a function as a prop to a child that is wrapped in React.memo, so the child does not re-render just because the parent created a new function.

React.memo

React.memo is a wrapper for a component that re-renders it only if its props changed by reference. Use it for components that re-render often with the same props, usually combined with useCallback and useMemo for stable prop references.

How They Work Together

A common pattern: wrap a child in React.memo, pass stable values with useMemo, and pass stable callbacks with useCallback. This prevents the child from re-rendering when the parent re-renders but the props have not meaningfully changed.

When to Use Each

Use useMemo for expensive computations. Use useCallback for functions passed to memoized children. Use React.memo for components that re-render often with unchanged props. Do not use any of them by default; measure first.

The Common Mistake

Wrapping everything in useMemo and useCallback without measuring. This adds complexity and overhead without benefit, because memoization itself costs something. Only use them when you have a measured reason.

The Takeaway

useMemo memoizes values, useCallback memoizes functions, and React.memo memoizes components. They work together to prevent unnecessary re-renders, but use them only when you have measured a real performance issue.