React
Explica cómo React Compiler analiza componentes y aplica memoización automática, sus requisitos de pureza y relación con memo, useMemo y useCallback.
React Compiler analiza componentes y Hooks para insertar memoización segura donde puede demostrar que conserva el comportamiento.
No convierte código impuro en código correcto. Depende de que los componentes respeten las reglas de React.
Código que antes necesitaba useMemo, useCallback o memo manualmente puede recibir optimizaciones automáticas.
function ProductList({ products, query }: Props) {
const visible = products.filter((product) =>
product.name.includes(query),
);
return visible.map((product) => (
<ProductRow key={product.id} product={product} />
));
}El código sigue escrito de forma directa. El Compiler decide qué valores conservar.
Todavía pueden existir integraciones, identidades contractuales o escenarios no compilados donde la memoización explícita sea necesaria.
Activa el Compiler siguiendo la integración de tu bundler o framework y revisa diagnósticos. No asumas que todo proyecto está compilado solo por usar una versión reciente de React.
El Compiler automatiza parte del trabajo mecánico, pero hace todavía más importantes la pureza y las reglas de React.
React Compiler realiza análisis estático sobre componentes y Hooks. Intenta demostrar qué valores y subárboles pueden reutilizarse sin cambiar el comportamiento.
source component
↓ análisis de dependencias y pureza
memoización generada
↓
runtime ReactNo “adivina” la intención. Cuando no puede demostrar seguridad, puede omitir optimización o reportar un diagnóstico.
El Compiler depende de reglas como:
Estas reglas ya eran necesarias para rendering moderno. El Compiler convierte algunas en requisitos analizables y puede descubrir código que funcionaba solo por accidente.
En componentes compatibles puede reducir la necesidad de:
React.memo para omitir renders por entradas estables.useMemo para conservar valores derivados.useCallback para estabilizar callbacks.Esto permite escribir primero código directo:
function ProductList({ products, query, onSelect }: Props) {
const visible = products.filter((product) =>
product.name.includes(query),
);
return visible.map((product) => (
<ProductRow
key={product.id}
product={product}
onSelect={() => onSelect(product.id)}
/>
));
}No significa que toda ejecución o cálculo desaparezca; el Compiler decide qué conservar según su análisis.
Un filtro O(n²) sigue siendo O(n²), aunque no se repita en algunos renders.
Una estrategia segura:
No asumas que actualizar react activa Compiler automáticamente.
El Compiler puede saltarse componentes incompatibles y compilar otros. Esto permite adopción incremental, pero debes observar reportes para evitar creer que toda la aplicación está optimizada.
Los lint rules relacionados ayudan a detectar patrones que impiden compilación antes del build.
Directivas como "use memo" y "use no memo" permiten control en escenarios específicos y dependen de la versión/configuración. No las agregues a cada archivo. El comportamiento predeterminado del Compiler debería cubrir código normal; las directivas necesitan una razón documentada.
Una librería puede publicarse precompilada o esperar que la aplicación compile su source según el ecosistema. Revisa:
No compiles dependencias arbitrariamente sin revisar su contrato.
No elimines automáticamente:
const value = useMemo(...);Puede existir por:
Clasifica cada uso. Si solo era una microoptimización mecánica y Compiler cubre el caso, simplifícalo con tests y profiling.
Cuando el comportamiento cambia al habilitar Compiler, no desactives la optimización sin investigar. Puede revelar:
El código debe ser correcto con o sin memoización.
Compiler puede reducir trabajo de React, pero añade un paso de build y genera caches runtime. Verifica:
No prometas mejoras iguales en todo proyecto.
Adoptarlo puede seguir siendo valioso por simplicidad futura, pero no reemplaza resolver el problema principal.
useMemo manual?lazy, Suspense y code splitting cambia el foco de evitar renders a coordinar código y recursos pendientes.