What does React.memo do and when is it worth using?

Question

Accepted Answer

`React.memo` wraps a component so it **skips re-rendering when its props are shallow-equal** to the previous render. By default a child re-renders whenever its parent does; `memo` short-circuits that when the props didn't actually change. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## The catch: it needs stable props `memo` does a **shallow** comparison. If the parent passes a new object/array/function each render, the comparison always fails and `memo` does nothing: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Fix by stabilizing the function with `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## When it's worth it - A component renders **often** with the **same** props and its render is non-trivial (big lists, expensive subtrees). ## When it's not - Most components are cheap; the comparison itself has a cost, and wrapping everything adds complexity for no gain. **Profile first** with the React DevTools Profiler, then memoize the proven hotspots — don't memoize blindly.