React 19 de Cero a Experto / React 19 moderno

El compilador de React: adiós al useMemo manual

Teoría22 min20 XP

Durante años, escribir React rápido significaba optimizar los re-renders A MANO con tres herramientas: memo, useMemo y useCallback. Era tedioso, fácil de equivocar, y llenaba el código de ruido. El COMPILADOR de React (React Compiler) cambia eso: analiza tu código y aplica esas optimizaciones automáticamente, para que las escribas… nunca. Hoy entiendes primero POR QUÉ existían esas herramientas (para saber qué te quita de encima el compilador) y luego cómo funciona la nueva era.

El problema: re-renders en cascada

Las tres herramientas manuales (el mundo de antes)

memo, useMemo y useCallback

Para evitar re-renders y recálculos innecesarios, React ofrecía tres herramientas —que aún existen y conviene entender—:

memo(Componente): envuelve un componente para que solo re-renderice si sus PROPS cambiaron (comparando por referencia). Sin memo, re-renderiza cada vez que su padre lo hace.
useMemo(() => calcular(), [deps]): memoriza el RESULTADO de un cálculo costoso, recalculándolo solo si cambian sus dependencias. Evita repetir trabajo pesado en cada render.
useCallback(fn, [deps]): memoriza una FUNCIÓN para que mantenga la misma referencia entre renders. Útil cuando esa función se pasa como prop a un componente con memo (si la función cambiara de referencia en cada render, el memo sería inútil).

El hilo común es la IGUALDAD REFERENCIAL (SC-02): en JavaScript, {} !== {} y (() => {}) !== (() => {}). Cada render crea objetos y funciones nuevas, con referencias nuevas, y eso dispara re-renders y rompe las comparaciones de memo. Estas tres herramientas estabilizaban las referencias a mano.

Por qué era un dolor

memoizacion-manual.tsx

// El "impuesto" de la memoización manual: ruido por todas partes
const Lista = memo(function Lista({ items, alBorrar }: Props) {
// useMemo para no recalcular en cada render
const ordenados = useMemo(() => [...items].sort((a, b) => b.valor - a.valor), [items]);
return <ul>{ordenados.map((i) => <li key={i.id} onClick={() => alBorrar(i.id)}>{i.nombre}</li>)}</ul>;
});

function App() {
const [items, setItems] = useState<Item[]>([]);
// useCallback para que 'borrar' no cambie de referencia y rompa el memo de <Lista>
const borrar = useCallback((id: number) => {
  setItems((prev) => prev.filter((i) => i.id !== id));
}, []);
return <Lista items={items} alBorrar={borrar} />;
}

Mira cuánta ceremonia: memo envolviendo el componente, useMemo para el orden, useCallback para la función, cada uno con su array de dependencias que hay que mantener correcto. Olvidar una dependencia introduce bugs sutiles; poner memoización de más gasta esfuerzo sin beneficio. Decidir QUÉ memoizar y CÓMO era una carga constante para el desarrollador —un impuesto sobre cada componente que quisieras rápido—.

El compilador: lo hace por ti

Qué hace el React Compiler

El compilador de React es una herramienta de build que analiza tu código ANTES de ejecutarlo y aplica automáticamente la memoización óptima. En la práctica:

Escribes componentes simples, sin memo, sin useMemo, sin useCallback. Solo la lógica.
El compilador detecta qué valores y funciones se pueden reutilizar entre renders y los memoriza por ti, con las dependencias correctas —sin que tú mantengas arrays de dependencias—.
El resultado: el rendimiento de una app cuidadosamente memoizada a mano, pero con código limpio.

El cambio de mentalidad: dejas de pensar en optimizar re-renders. Escribes React idiomático y directo, y el compilador se encarga del rendimiento. Es como pasar de administrar la memoria a mano a tener un recolector de basura: una capa de preocupación que desaparece. Las herramientas manuales siguen existiendo (para casos borde y código sin compilar), pero dejan de ser tu trabajo diario.

Honestidad sobre el estado actual

Qué saber por ahora

El compilador de React es reciente y se está adoptando gradualmente. Dos consejos honestos:

Sigue entendiendo memo/useMemo/useCallback. Mucho código existente los usa, no todos los proyectos tienen el compilador activado todavía, y en entrevistas te van a preguntar por ellos. Saber QUÉ hacen (y por qué la igualdad referencial los hacía necesarios) es conocimiento que no caduca —el compilador automatiza justo eso—.
No memoices prematuramente. Incluso sin compilador, la regla siempre fue: primero escribe código claro, y memoiza solo si MIDES un problema de rendimiento real (con el Profiler, módulo 10). La mayoría de componentes nunca necesitaron memoización. El compilador refuerza esa lección: preocúpate por la lógica, no por optimizar de más.

En resumen: el futuro es escribir React sin memoización manual, pero el presente exige entenderla. Aprendiste ambas cosas —qué automatiza el compilador y por qué existía lo que automatiza—.

¿Qué problema resuelven memo/useMemo/useCallback, y qué cambia con el compilador de React?

Mini-reto

Razona (en papel): tienes un <Padre> con un contador en useState y un <HijoPesado> que recibe una prop datos que NO cambia cuando el contador sube. 1) ¿Por qué <HijoPesado> re-renderiza al subir el contador aunque sus datos no cambien? 2) ¿Cómo lo evitarías a mano con memo (y qué pasa si datos fuera un objeto creado en el render del padre)? 3) ¿Qué haría el compilador de React aquí sin que escribas nada? Explica el papel de la igualdad referencial en las tres respuestas.

Qué sigue

Cierras el módulo con un reto que junta las ideas de React 19 en una "Mi Bolsillo" con envío OPTIMISTA: el gasto aparece al instante y se confirma o revierte. Lo construyes con las herramientas que ya corren en tu entorno, y la solución te muestra cómo lo expresarían useActionState y useOptimistic en un proyecto React 19 real —el puente entre lo que practicaste y el React del futuro—.