React Performance Optimization with React.memo

What is React.memo?

React.memo is a higher-order component that wraps a functional component to memoize its rendered output.

It prevents the component from re-rendering if its props remain the same between renders.

By default, React.memo performs a shallow comparison of the previous and next props to decide if a re-render is necessary.

• Wraps a functional component to memoize it.
• Prevents unnecessary re-renders when props are unchanged.
• Uses shallow comparison of props by default.
• Can accept a custom comparison function for advanced use cases.

How React.memo Works

When a component wrapped with React.memo receives new props, React compares them with the previous props.

If the props are shallowly equal, React skips rendering the component and reuses the last rendered output.

If props differ, React re-renders the component as usual.

• Shallow comparison checks primitive values and object references.
• Objects and arrays are compared by reference, not deep equality.
• Custom comparison functions can override default behavior.

Using React.memo: Basic Example

Here is a simple example of using React.memo to optimize a functional component that renders a user profile.