React.memo

React.memo can skip a function component render when its props compare equal according to the configured comparison. It is a performance optimization, not a guarantee that a component will never render.

`React.memo` wraps a function component and lets React reuse its previous rendered result when the component receives props that are considered equal. By default, React compares each prop using `Object.is` semantics, rather than performing a deep comparison.

This is most useful when a parent renders frequently but a child often receives unchanged props. If the parent rerenders and the memoized child’s props are unchanged, React can skip rendering that child. The optimization matters most when the skipped component is relatively expensive or rerenders frequently.

You can provide a custom comparison function as the second argument to `memo`. It receives the previous and next props and should return `true` when the component can safely skip rendering. The comparison itself has a cost, so a custom comparator is only beneficial when its work is cheaper than the renders it prevents.

`React.memo` only concerns props. A memoized component can still rerender because its own state changes or because a context value it consumes changes. Likewise, changing an object, array, or function prop to a newly created reference can defeat the default comparison even when its contents are equivalent.

Key points

• `React.memo` memoizes a function component based on its props.
• The default comparison uses `Object.is` for each prop.
• A custom comparator can control whether a rerender is skipped.
• Own state and consumed context can still cause a memoized component to rerender.
• New object, array, or function references can make props unequal despite equivalent contents.

Interview questions

What problem does React.memo solve?

`React.memo` can prevent a function component from rendering again when its props have not changed according to its comparison. This is useful when a parent rerenders frequently while a child does not need new input. It is primarily a performance optimization rather than a correctness mechanism. The component can still rerender for reasons other than changed props.

How does React.memo decide whether to skip a render?

With no custom comparator, React compares the previous and next props using `Object.is` for each prop. If the props are considered equal, React can skip rendering the memoized component when its parent rerenders. A custom comparison function can replace this default prop comparison. The custom function must be correct because incorrectly declaring props equal can prevent necessary updates.

Why might React.memo not help when passing objects or callbacks as props?

The default comparison checks references for object, array, and function values. Creating a new object or function during every parent render produces a new reference, so the prop is considered different even if its contents or behavior are equivalent. In those cases, `useMemo` or `useCallback` can sometimes stabilize the prop reference when doing so is justified. The better solution is still to measure whether the optimization is needed.

Does React.memo prevent rerenders caused by context or state?

No. `React.memo` controls optimization based on props, but it does not freeze the component. A memoized component can rerender when its own state changes or when a context value it consumes changes. Therefore, wrapping a context-consuming component in `memo` does not mean every context update will be ignored. Component structure may need to separate context consumption from an expensive memoized child if context updates are causing unnecessary work.

When would you use a custom comparator with React.memo?

A custom comparator is appropriate when the normal prop comparison does not match the application's useful notion of equality and the comparison can be performed more cheaply than rendering the component. For example, a component might receive a structured value whose relevant fields can be compared directly. The comparator must account for every prop that can affect rendering, because returning `true` incorrectly can leave the UI based on stale assumptions. It should also be benchmarked because comparison work can itself become a performance cost.