Explain the difference between useMemo and useCallback

What's really being asked

The interviewer wants to know if you understand referential identity in JavaScript and how React.memo performs shallow prop comparison. They are checking whether you know that useMemo caches a computed value while useCallback caches a function reference, and critically, whether you can explain why a stable function reference is necessary to let a memoized child bail out of rendering.

The full answer

First, define the distinction in one sentence: useMemo takes a function that returns a value and caches that returned value, whereas useCallback takes a function and caches the function itself. Second, explain the React.memo contract: when a component is wrapped in React.memo, React skips rendering if every prop is the same reference as the previous render using Object.is. Third, connect the dots: if a parent creates a new inline function during render and passes it as a prop, React.memo sees a different reference and re-renders the child even if the function body is identical. Fourth, mention that useCallback solves this by returning the same function instance across renders when dependencies are unchanged. Fifth, note that useCallback is unnecessary if the child is not memoized or if the function is not passed as a prop.

The mistakes people make

Saying that useMemo and useCallback do the same thing is a major red flag. Another mistake is claiming that useCallback prevents the parent from re-rendering; it does not, it only stabilizes the reference given to children. Some candidates also say useCallback is only for useEffect dependency arrays, which misses the primary React.memo use case. Over-memoizing every function without profiling is also a red flag for senior candidates because it shows cargo-cult optimization.

What usually comes next

The interviewer may ask when React Compiler removes the need for manual useCallback. They might ask how useCallback interacts with custom Hooks that return stable references. Another follow-up is asking what happens if the dependency array is wrong or empty, or how this pattern scales with a list of memoized items where each row needs its own stable callback.

A concrete example

Imagine a Parent component with a count state and a Child component wrapped in React.memo that receives an onClick handler. If Parent renders and defines handleClick as a regular inline function, JavaScript creates a new function object every time. React.memo compares the old onClick prop with the new one via Object.is, sees they are different, and re-renders Child. If Parent instead uses useCallback with an empty dependency array around the setter, React returns the identical function on subsequent renders. React.memo then sees an unchanged onClick prop and skips the child render entirely, saving layout and paint work.