Rendimiento y errores comunes al escalar

Optimizar React no consiste en llenar el código de useMemo y useCallback.

Primero hay que detectar si hay un problema real.

Lo que suele arreglar más

• menos estado duplicado
• componentes más pequeños
• listas bien identificadas con key
• evitar renders pesados innecesarios
• code splitting con lazy

React.memo

Sirve para evitar renders de un componente si sus props no cambian.

import { memo } from 'react';

const ProductRow = memo(function ProductRow({ product }) {
  return <li>{product.name}</li>;
});

Útil cuando:

• el componente se renderiza mucho
• sus props cambian poco
• renderizarlo es costoso

No lo uses por defecto “por si acaso”.

useMemo y useCallback

Pueden ayudar, pero mal usados complican más de lo que arreglan.

Pregunta correcta:

“¿Estoy evitando un coste real o solo decorando el código?”

Errores muy comunes

• efecto que recalcula datos derivados
• estado que duplica props
• memoización preventiva sin medir nada
• actualizar contexto global con demasiada frecuencia
• listas grandes sin paginación, virtualización o división

Regla final

Antes de optimizar:

1. entiende por qué renderiza
2. simplifica el diseño
3. divide responsabilidades
4. optimiza solo donde haya coste real

Ese orden evita mucho código ceremonioso y poca mejora real.

Lo que ya dominas en React Intermedio

Con este curso ya has entrado en la capa donde React empieza a escalar de verdad:

1. estado compartido con Context
2. estado complejo con useReducer
3. referencias y acceso imperativo con useRef
4. reutilización de lógica con custom hooks
5. Suspense y lazy
6. transiciones con useTransition y useDeferredValue
7. composición y arquitectura
8. criterios de rendimiento

Ya no estás solo usando React: ya estás tomando decisiones con más criterio sobre cómo estructurarlo.

Para repasar rápido

Si quieres tener todo esto condensado como referencia rápida, tienes la Cheat Sheet completa de React.