¿Componentes que se renderizan más de lo necesario? React puede volverse lento.

El truco

// Componente ANTES (mal)
const MiComponente = ({ nombre }) => {
  console.log('Renderizando...');
  return <div>{nombre}</div>;
};

// Uso
<MiComponente nombre="Juan" />

// Componente DESPUÉS (bien)
import React, { memo } from 'react';

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

// Uso
<MiComponente nombre="Juan" />

React.memo es un HOC (Higher Order Component) que memoriza el resultado de un componente funcional y solo lo vuelve a renderizar si sus props han cambiado. Esto es crucial cuando tienes un componente que recibe muchas actualizaciones de props pero no siempre necesita re-renderizarse. Simplemente envuelve tu componente funcional con memo y React se encargará de las optimizaciones de renderizado por ti. Así, mejoramos el rendimiento sin cambiar mucho el código.

A veces, el truco más sencillo puede resolver grandes problemas de rendimiento.