React como un ninja: optimiza tus componentes con memo

Tu aplicación React se ralentiza porque algunos componentes funcionales vuelven a renderizar sin necesidad cada vez que se actualiza el estado.

El truco

Antes (mal):

function MiComponente({ datos }) {
  console.log('Renderizando MiComponente');
  return <div>{datos}</div>;
}

export default MiComponente;

Después (bien):

import React from 'react';

const MiComponente = React.memo(function({ datos }) {
  console.log('Renderizando MiComponente');
  return <div>{datos}</div>;
});

export default MiComponente;

React.memo es una función de orden superior que memoriza el componente funcional. Solo lo vuelve a renderizar si las props cambian. Esto es ideal cuando el componente recibe las mismas props repetidamente. En el ejemplo, MiComponente solo se renderiza si datos cambia, reduciendo renders innecesarios y mejorando el rendimiento.

Conclusión: Usa React.memo para componentes que no necesitan re-renderizarse en cada actualización, optimizando el rendimiento de tu aplicación React.