React.memo y useMemo: Evitando Renderizados Innecesarios

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.