useMemo vs useCallback, and React.memo

Model answer.

• `useMemo(() => compute(a, b), [a, b])` caches the result of a calculation and recomputes only when a dependency changes.
• `useCallback(fn, [deps])` caches the function itself, so the same function object is returned across renders. It is the same as useMemo(() => fn, deps).
• `React.memo(Component)` skips re-rendering a component when its props are shallowly equal to last time.

They matter together: React.memo compares props by reference, so a new object or arrow function created on every parent render defeats it. useCallback and useMemo keep those props stable.

const Row = React.memo(function Row({ item, onSelect }) { /* expensive */ });

function List({ items, filter }) {
  const visible = useMemo(() => items.filter(i => i.name.includes(filter)), [items, filter]);
  const onSelect = useCallback(id => setSelected(id), []);
  return visible.map(i => <Row key={i.id} item={i} onSelect={onSelect} />);
}

When not to bother: cheap calculations, components that render quickly anyway, or values passed only to plain DOM elements. Memoisation has its own cost (memory, dependency comparisons, harder-to-read code). Measure with the React DevTools Profiler first. (The React Compiler can add this memoisation automatically.)