What is React.memo and how does it optimize performance?

React.memo is a higher-order component that memoizes your component.

It prevents re-rendering if the props haven't changed, which can improve performance for expensive components.

React.memo does a shallow comparison of props by default.

You can provide a custom comparison function as the second argument for more control over when the component should re-render.

// Basic usage const MyComponent = React.memo(function MyComponent(props) { return <div>{props.name}</div>; });

// With custom comparison const MyComponent = React.memo(function MyComponent(props) { return <div>{props.name}</div>; }, (prevProps, nextProps) => { // Return true if you don't want the component to update return prevProps.name === nextProps.name; });