Lección 9 de 12 · Lectura y práctica
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.
Del concepto a la práctica
Taller de esta lección
La memoización solo ayuda si evita trabajo observable y sus dependencias representan todos los datos usados. Considera una lista de tres productos: filtrar por "ca" devuelve “Café” y “Caja”; si products cambia de referencia, el cálculo debe repetirse aunque la consulta sea igual.
Ejemplo resuelto
const visible = React.useMemo(
() => products.filter(p => p.name.toLowerCase().includes(query.toLowerCase())),
[products, query]
);Con Café, Caja, Pan y consulta ca, visible.length es 2.
Pruébalo
Usa exactamente esos tres registros.
Ejecuta el filtro con
query="ca".Comprueba que los ids de salida corresponden a Café y Caja, en el mismo orden.
Comprueba tu resultado
Error frecuente: omitir query de dependencias y mostrar resultados antiguos. Corrígelo incluyendo cada entrada usada.
Ejercicio: cambia la consulta a pan; el resultado esperado es un solo registro, y no debes añadir React.memo a todos los componentes por defecto.
React.memo compara props y puede omitir un render si no cambian, pero no impide actualizaciones del estado propio o del contexto leído. Las referencias creadas nuevamente pueden anular la ventaja. Si React Compiler está habilitado, evalúa su memoización antes de añadirla manualmente.
Mapa de prácticamemo puede evitar trabajo cuando las props no cambian, pero el estado propio y Context siguen pudiendo actualizar el componente. Mide el coste antes de añadir memoización y conserva la corrección sin depender de ella.
Ver la infografía en tamaño completo ↗Fuentes para profundizar
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.
Sigue con React Intermedio: Patrones y Optimización
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.