Primero mide, luego corrige la causa real — no espolvorees useMemo por todas partes basándote en una suposición.
Usa el Profiler de React DevTools (activa "Highlight updates when components render"). Muestra qué componentes se volvieron a renderizar y por qué (cambiaron las props, cambió el estado, el padre se renderizó, cambió el contexto).
1. Props con nuevos objetos/arrays/funciones en cada render anulan React.memo:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. El valor del contexto recreado en cada render → todos los consumidores se vuelven a renderizar. Memoiza el value o divide los contextos.
3. Estado colocado demasiado arriba. Bajar el estado para que menos componentes dependan de él suele ser la mayor mejora:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Trabajo costoso en el render → envuélvelo en useMemo.
Los re-renders suelen ser baratos — React es rápido. La mayoría de las "optimizaciones" añaden complejidad sin beneficio medible. Prefiere soluciones estructurales (colocar el estado cerca de donde se usa, virtualización de listas para miles de filas) antes que esparcir memos. Optimiza los puntos calientes concretos que revela el profiler y vuelve a medir para confirmar que la corrección realmente ayudó.
Medir antes de optimizar evita perder esfuerzo en complejidad innecesaria y dirige tu atención a los pocos hotspots reales que afectan al rendimiento percibido por el usuario.