React.memo: Skip Unnecessary Component Renders

Why it exists

By default, React re-renders a component whenever its parent re-renders. This cascading update can be inefficient if the child component is expensive to render and its props haven't actually changed. React.memo provides a way to opt-out of these unnecessary renders.

The mental model

Think of React.memo as a gatekeeper for your component's render function. It holds onto the last set of props it received. When a parent triggers a re-render, the gatekeeper compares the incoming props to the saved ones. If they are identical, it blocks the render and tells React to reuse the previous result.

How it works

You wrap your component in memo, like const MemoizedComponent = memo(MyComponent). This returns a new component. When this new component is about to re-render, React first performs a shallow comparison of its new and old props using Object.is. If all props are equal, React skips re-rendering the component and its children. You can provide an optional custom comparison function as a second argument, but this is rarely needed.

When to use it

Use memo for pure components that render the same output for the same props, especially if they are rendered often or are computationally expensive. It's a performance optimization for situations where a parent's state updates frequently but doesn't affect all of its children.

When not to use it

Don't wrap every component in memo. The prop comparison has a small cost, so if a component's props change on almost every render, memo adds overhead for no benefit. It's also unnecessary for very simple components that are cheap to render. Note that the React Compiler aims to automate this process, potentially reducing the need for manual memo usage.

One canonical example

Imagine a UserProfile component that receives a user object. Its parent component re-renders every second due to a timer. If you wrap it (memo(UserProfile)) but the parent creates a new user object on every render (const newUser = {...}), the memo check fails because the object reference is new. The component will re-render despite its data being the same. To make memo work, the parent must pass the exact same object reference between renders.