React.memo y useMemo: evitando renderizados innecesarios

La optimización en React no consiste en envolver todo con memoización. Consiste en medir, encontrar renders costosos y aplicar la herramienta correcta cuando hay un beneficio real.

Diferencias clave

React.memo: evita re-renderizar un componente si sus props no cambiaron.
useMemo: memoriza el resultado de un cálculo costoso entre renders.
useCallback: memoriza una función para evitar referencias nuevas cuando eso importa.

const VisibleItems = React.memo(function VisibleItems({ items }) {
  return items.map((item) => <li key={item.id}>{item.name}</li>);
});

function ProductList({ products, query }) {
  const filtered = useMemo(() => {
    return products.filter((product) =>
      product.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [products, query]);

  return <VisibleItems items={filtered} />;
}

Cuándo no usarlo

No uses useMemo para cálculos triviales. La memoización también tiene costo mental y técnico. Primero medí con React DevTools Profiler.

Ejercicio: optimización medida

Tomá una lista grande con filtro. Medí renders con React DevTools, aplicá useMemo al cálculo de filtrado y compará antes/después.

Checklist

Identificaste un render o cálculo costoso.
La memoización tiene dependencias correctas.
Podés explicar por qué mejora o por qué no hacía falta.

Convertí esta lección en una prueba técnica visible.

Una app pequeña publicada, con README y decisiones explicadas, funciona mejor que una lista de tecnologías sueltas.

Paso 1

Creá una demo mínima que use el concepto de la lección.

Paso 2

Escribí un README corto con objetivo, stack, decisión técnica y mejora futura.

Paso 3

Publicá la demo y enlazala desde tu perfil profesional.

React.memo y useMemo: Evitando Renderizados Innecesarios