The answer
When you pass a function as a prop to a child that is wrapped in React.memo. The stable reference from useCallback prevents the child from re-rendering just because the parent created a new function on every render.
useMemo vs useCallback vs React.memo: When to Use Each
When should I use useCallback?
More FAQs in useMemo vs useCallback vs React.memo: When to Use Each
useMemo memoizes a computed value, returning the cached result unless a dependency changed. useCallback memoizes a function, keeping the same reference across renders. Use useMemo for expensive computations and useCallback for functions passed to memoized children.
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.
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.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.