Performance
React.memo & taming re-renders
Shallow prop comparison, custom comparators, and composition tricks.
A child re-renders whenever its parent does, regardless of whether its props changed. React.memo wraps a component to skip re-render when props are shallowly equal.
React.memo is a bouncer checking IDs: identical props, no re-entry — but only if the IDs (references) actually stay the same between renders.
Key concepts
1
It only helps if props are referentially stable — pair it with useCallback/useMemo. A custom comparator second argument allows deep or selective comparison when needed.
useCallbackuseMemo
2
Often the cheaper fix is composition: lifting expensive children into children props or moving state down, so the heavy subtree is not re-created by the frequently-updating parent.
compositionchildren
3
Pitfall: memo with inline object/function props does nothing — new references every render. Interview angle: "the child still re-renders despite memo — why?" — unstable props; show the useCallback fix or the children-lifting pattern.
Pitfall:Interview angle:memouseCallbackchildren
jsx
const Row = React.memo(function Row({ item, onPick }) {
return <li onClick={() => onPick(item.id)}>{item.name}</li>;
});
// Composition to avoid re-render: state change in Parent won't re-render <Heavy/>
function Layout({ children }) { const [open, setOpen] = useState(false); return <>{children}</>; }