Cuando tu aplicación React se vuelve lenta, es posible que estés lidiando con renders innecesarios de componentes.

El truco

// ANTES (Mal)
const MiComponente = ({ datos }) => {
  console.log("Componente renderizado");
  return <div>{datos}</div>;
};

// DESPUÉS (Bien)
import React from 'react';

const MiComponente = React.memo(({ datos }) => {
  console.log("Componente renderizado");
  return <div>{datos}</div>;
});

React.memo es una función de orden superior que memoriza (cachea) el resultado de la renderización de un componente funcional. Cuando las props no cambian, React.memo evita que el componente se vuelva a renderizar. Esto es especialmente útil para componentes que se actualizan con frecuencia y no dependen de props complejas.

Para usarlo, simplemente envuelve tu componente funcional con React.memo. Ten en cuenta que si las props son objetos complejos, puede que necesites una función de comparación personalizada, pero para props simples, la comparación por defecto es suficiente.

Optimizar el renderizado de tus componentes puede marcar una diferencia significativa en la performance y experiencia de usuario en tus aplicaciones React.