How to memoize a component in React with React.memo?

To memoize a component in React using React.memo, simply wrap the component that you want to memoize with the React.memo higher order component.

Here's an example of how to memoize a functional component using React.memo:

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Component logic here
});

export default MyComponent;

In the above example, the functional component MyComponent is wrapped with React.memo, which will prevent the component from re-rendering if its props have not changed. This can help improve performance by reducing unnecessary re-renders of the component.

Keep in mind that React.memo only shallowly compares the props of the component, so if the props contain complex objects or arrays, you may need to implement custom comparison logic to ensure the component is properly memoized.