memo, useMemo and useCallback

Three tools, one idea. Skip work that would produce the same answer.

React.memo skips re-rendering a component when its props have not changed.

useMemo caches a computed value between renders.

useCallback caches a function between renders.

Why they are usually used together. memo compares props shallowly. A function or object created during the render is a new value every time, so a memoised child with an inline arrow prop re-renders exactly as often as before, and you have added cost for nothing.

That is the trap: memo appears to do nothing, so people add more of it.

Why memo can look broken

Ineffective

// new function each render, so
// memo never skips anything
<Row
  onSelect={id => pick(id)}
/>

Effective

// stable identity, so memo works
const onSelect = useCallback(
  id => pick(id), []
);

<Row onSelect={onSelect} />

Compare → Neither is wrong on its own. The left is perfectly good code in a component that is not a measured bottleneck. Adding memo is what makes the difference matter.

A cost, not free. Each of these adds a comparison, a cached value, and code to read. On a component that renders in under a millisecond, that is a net loss.

The honest rule: write it plainly, measure, and optimize the specific thing the profiler points at.

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Practice Test →

← Back