React
Explica memo, useMemo y useCallback como optimizaciones basadas en identidad y trabajo evitado, incluyendo costos, dependencias y casos donde no aportan valor.
La memoización conserva un resultado entre renders mientras sus dependencias no cambien. Es una optimización, no una garantía semántica ni una herramienta para corregir lógica.
const ProductRow = memo(function ProductRow({ product }: Props) {
return <li>{product.name}</li>;
});React puede omitir el render si las props son iguales según comparación superficial.
const visibleProducts = useMemo(
() => filterProducts(products, query),
[products, query],
);Úsalo para cálculos realmente costosos o para estabilizar un valor necesario por otra optimización.
const handleDelete = useCallback((id: string) => {
setProducts((current) => current.filter((item) => item.id !== id));
}, []);Conserva la identidad de una función. No evita crear código interno ni hace más rápida cada llamada.
memo funcione.Primero diseña correctamente, después mide y finalmente optimiza el cuello real.
memo → puede omitir render de un componente por props
useMemo → conserva el resultado de un cálculo
useCallback → conserva la referencia de una funciónNinguna evita automáticamente renders del padre, cambios de Context, state propio ni trabajo del navegador.
const ProductRow = memo(function ProductRow({ product }: Props) {
return <li>{product.name}</li>;
});Por defecto, React compara cada prop con Object.is. Si pasas un objeto nuevo:
<ProductRow product={{ id, name }} />la referencia cambia y memo no puede omitir el render. Eso no convierte la creación de objetos en un error; solo indica que esta optimización no encuentra props estables.
memo(Component, (previous, next) => previous.id === next.id)Un comparador personalizado debe revisar todas las props que afectan la salida, incluidas funciones. Si declara igualdad incorrectamente, el componente puede leer closures antiguas. Además, una comparación profunda puede costar más que renderizar.
const total = useMemo(() => calculateTotal(items), [items]);El cálculo debe seguir siendo correcto sin la cache. No uses useMemo para:
React puede descartar caches en escenarios específicos; la semántica pertenece a state, refs o fuentes externas.
const handleDelete = useCallback((id: string) => {
setItems((current) => current.filter((item) => item.id !== id));
}, []);El updater evita leer items, por lo que la función puede conservarse sin esa dependencia.
Si lee una prop:
const handleSave = useCallback(() => save(documentId), [documentId]);Debe cambiar cuando cambia el documento. Una callback estable con dependencias incorrectas produce lógica obsoleta.
Si el hijo no está memoizado y no existe otro contrato, useCallback suele añadir complejidad sin ahorrar trabajo.
const visibleProducts = useMemo(
() => filterProducts(products, query),
[products, query],
);
const handleSelect = useCallback((id: string) => {
setSelectedId(id);
}, []);
return (
<MemoizedProductList
products={visibleProducts}
onSelect={handleSelect}
/>
);Las tres piezas tienen sentido juntas si filterProducts o la lista son costosos y las props suelen permanecer iguales. Si cualquiera cambia siempre, la cadena puede no aportar.
Colocar state más cerca o pasar children puede evitar recalcular regiones sin APIs de memo:
function ColorPicker({ children }: { children: React.ReactNode }) {
const [color, setColor] = useState("red");
return <section>{children}</section>;
}El padre puede crear children; actualizar state interno no obliga necesariamente a recrear ese elemento desde arriba.
Un componente memoizado vuelve a renderizar si consume un Context cuyo value cambió. Divide contextos o lee la parte necesaria en un componente exterior y pásala como prop estable. No esperes que memo bloquee dependencias reales.
Cada memoización agrega:
Para un cálculo trivial:
const fullName = `${firstName} ${lastName}`;useMemo suele ser más costoso conceptualmente que recalcular.
Flujo:
No optimices por cantidad de console.log; render no equivale a commit ni problema visible.
Con Compiler habilitado, React puede aplicar memoización automática a código compatible. Eso reduce usos manuales, pero no elimina:
Confirma que el proyecto realmente utiliza Compiler antes de retirar contratos manuales.
useMemo para efectos.memo, useMemo y useCallback resuelven niveles distintos.memo no bloquea un cambio de Context?useCallback aporta al pasar una función?useMemo?React Compiler y memoización automática explica qué parte de este trabajo puede asumir el tooling.