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.