React · Frontend system thinking
How does React.memo work and when does it help?
Short answer
React.memo skips re-rendering a component when its props are shallowly equal. It helps when a parent re-renders often but the child's props are stable, not when the child's own state or context changes.
By default, when a parent renders, its children render too. React.memo wraps a component and compares the new props with the previous props using Object.is on each key. If every prop is equal, React reuses the previous render output and skips the child's render function.
const Row = React.memo(function Row({ item, onSelect }) {
return (
<button onClick={() => onSelect(item.id)}>
{item.name}
</button>
);
});What memo does not stop
- A re-render caused by the component's own state
- A re-render caused by a context value it consumes
- A re-render caused by a changed prop, including a new object or function identity
- The parent from doing its own render work
Passing an inline object or arrow function defeats shallow comparison because a new value is created on every parent render. Stabilise those props with useMemo and useCallback, or move the state closer to where it is used so the parent does not re-render at all.
areEqual.Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Does React.memo prevent re-renders from state changes inside the component?
- 2Why does an inline callback defeat React.memo?
- 3When would you use a custom comparison function?
- 4How is React.memo different from useMemo?
Say it in the interview
React.memo shallowly compares a component's props and skips its render when they are equal. It is useful when a frequently re-rendering parent passes stable props to an expensive child. It does not stop renders caused by the child's own state or context, and it is defeated by new object or function identities. I use it after measuring, not as a default wrapper.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React mock interview and get scored feedback on depth, clarity and confidence.