Explain React.memo for Component Memoization in React

63 / 100

Performanceintermediate

React.memo for Component Memoization

Learn how React.memo skips re-rendering a component when its props haven't meaningfully changed.

React.memo(Component) wraps a function component so that React skips re-rendering it if its props are shallowly equal to the props from the previous render. By default it compares each prop with Object.is, the same reference-equality check React uses elsewhere, so it works best when props are primitives or stable references rather than freshly created objects/arrays/functions on every parent render.

React.memo is like a assistant who checks 'is the instruction exactly the same as last time?' before redoing an entire task — if literally nothing changed, they just hand you yesterday's finished result again instead of redoing all the work, but if even one word of the day's instructions differs, they redo the whole thing from scratch.

Key Concepts

This is purely a performance optimization, not a correctness mechanism — a component wrapped in React.memo still behaves identically when it does re-render; the wrapper just decides whether re-rendering is necessary at all based on prop equality. It's most valuable for components that are expensive to render (large lists, complex layout calculations) and that receive the same props repeatedly while an unrelated ancestor re-renders for other reasons.

React.memo

React.memo accepts an optional second argument, a custom comparison function, for cases where shallow equality isn't sufficient — for example, if a prop is an object whose specific fields matter more than its reference. However, reaching for a custom comparator is often a sign that restructuring the data (or memoizing at the source with useMemo/useCallback) would be a cleaner fix.

React.memouseMemouseCallback

Interviewers commonly ask why wrapping a component in React.memo sometimes has no effect — the answer is almost always that a parent is passing a new object, array, or function reference as a prop on every render, defeating the shallow comparison, which is why React.memo is frequently paired with useMemo/useCallback on the parent side.

React.memouseMemouseCallback