How to use react memo?

React’s memo function is a higher-order component that you can use to optimize the rendering performance of your React components. When you wrap a component with memo, React will only re-render the component when its props have changed.

To use memo with a functional component, you simply need to wrap the component in React.memo(). For example:

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      {/* ... */}
    </div>
  );
}
export default React.memo(MyComponent);

This will create a new component that is optimized for rendering performance. Whenever the component is rendered, React will check if its props have changed, and only re-render it if the props have changed.

Note that memo only performs a shallow comparison of props. If the props passed to the component are objects or arrays, you should make sure that they are not mutated outside of the component, otherwise memo may not work as expected. To avoid this issue, you can use immutability libraries like Immutable.js, or use the spread operator to create new object or array references before passing them as props to the component.