React.memo es un componente de orden superior utilizado en React para optimizar el rendimiento al evitar reproducciones innecesarias de componentes funcionales. Funciona memorizando el resultado de un componente y solo volver a renderizarlo si sus accesorios cambian. Esto es útil para optimizar el rendimiento en componentes funcionales que generan el mismo resultado con los mismos accesorios.

Uso de ejemplo:

import React from 'react';

const MyComponent = ({ count }) => {
  console.log('Component re-rendered');
  return 
Count: {count}
;
};

export default React.memo(MyComponent);

En este ejemplo, MyComponent solo se volverá a representar si cambia la propiedad de recuento. Si el componente principal se vuelve a renderizar pero la propiedad de recuento sigue siendo la misma, MyComponent no se volverá a renderizar, lo que reduce los cálculos innecesarios.

De forma predeterminada, React.memo realiza una comparación superficial de accesorios, pero también puede proporcionar una función de comparación personalizada para verificaciones más profundas si es necesario:

const MyComponent = React.memo((props) => {
  /* component code */
}, (prevProps, nextProps) => {
  // return true if props are equal, false otherwise
  return prevProps.someValue === nextProps.someValue;
});

Esto puede optimizar aún más el rendimiento cuando tienes estructuras de accesorios más complejas.