Aprende a optimizar renders de forma inteligente sin caer en sobre-optimización prematura ni complejidad innecesaria.
Optimizar en React no significa envolver todo en hooks de memoización; significa identificar cuellos de botella reales y actuar con precisión.
`React.memo` evita renders de componentes hijos cuando sus props no cambian.
`useMemo` cachea resultados costosos y `useCallback` estabiliza referencias de funciones entre renders.
Usados sin criterio, estos recursos pueden complicar código sin mejora tangible.
Primero mide, luego optimiza: no al revés.
Si la UI ya es fluida, añadir memoización masiva puede ser contraproducente en mantenimiento.
Optimiza especialmente listas grandes, cálculos pesados o subárboles complejos que se rerenderizan sin necesidad.
React DevTools Profiler te ayuda a confirmar dónde hay coste real de render.
Padre con estado local, hijo memoizado y callback estable.
Cada capa de memoización añade complejidad cognitiva.
Dependencias mal definidas pueden producir valores stale difíciles de detectar.
`useMemo` para cálculos triviales suele costar más de lo que ahorra.
Una arquitectura clara y componentes bien divididos suelen dar mejor rendimiento base que optimizaciones prematuras.
Aprende a optimizar renders de forma inteligente sin caer en sobre-optimización prematura ni complejidad innecesaria.
Código del tema: Componentes, estado y render declarativo
Primero mide, luego optimiza: no al revés.
Si la UI ya es fluida, añadir memoización masiva puede ser contraproducente en mantenimiento.
Optimiza especialmente listas grandes, cálculos pesados o subárboles complejos que se rerenderizan sin necesidad.
React DevTools Profiler te ayuda a confirmar dónde hay coste real de render.
Padre con estado local, hijo memoizado y callback estable.
import { memo, useCallback, useState } from 'react';
const Child = memo(function Child({ onPing }) {
console.log('Render Child');
return <button onClick={onPing}>Ping</button>;
});
function Parent() {
const [count, setCount] = useState(0);
const handlePing = useCallback(() => {
console.log('pong');
}, []);
return (
<>
<button onClick={() => setCount((c) => c + 1)}>{count}</button>
<Child onPing={handlePing} />
</>
);
}Cada capa de memoización añade complejidad cognitiva.
Dependencias mal definidas pueden producir valores stale difíciles de detectar.
`useMemo` para cálculos triviales suele costar más de lo que ahorra.
Una arquitectura clara y componentes bien divididos suelen dar mejor rendimiento base que optimizaciones prematuras.