Cómo funcionan los Signals en Angular 22 y React 19

Signals en Angular 22 y React 19: el nuevo modelo de reactividad es la discusión que está redefiniendo cómo pensamos la UI: menos trozos de árbol reevaluados, más actualizaciones puntuales y menos sorpresas en producción. Si tu equipo decide entre control explícito o automatización por compilador, este artículo te da criterios prácticos y ejemplos reales para elegir con criterio.

Resumen rápido (lectores con prisa)

Fine-grained reactivity actualiza solo dependencias directas. Angular 22 introduce Signals (signal(), computed(), effect()) y formulas sin Zone.js. React 19 usa el React Compiler para inferir memoización y añade use() para leer Promises/recursos en render. Ambos mejoran escalabilidad; Angular es explícito y más trazable, React reduce fricción de adopción.

Signals en Angular 22 y React 19: el nuevo modelo de reactividad (explicación rápida)

La reactividad de grano fino significa actualizar únicamente el nodo del DOM que depende de un valor concreto. Angular 22 lo hace declarando Signals (signal(), computed(), effect()), eliminando Zone.js y ofreciendo formularios basados en Signals. React 19 opta por no añadir un primitivo signal; en su lugar usa el React Compiler para inferir memoización y añade el hook use() para leer Promises/recursos en render. Documentación oficial Angular. Blog oficial React 19.

¿Por qué importa la reactividad de grano fino?

Los problemas reales aparecen en aplicaciones con alta densidad de datos:

• Dashboards financieros con cientos de celdas que actualizan simultáneamente.
• Formularios complejos con validaciones cruzadas y campos dependientes.
• UIs que requieren latencia mínima y CPU predecible en clientes de bajo rendimiento.

La solución tradicional (Virtual DOM diffs o Zone.js) escala mal: consumes CPU revisando cosas que no cambiaron. Fine-grained reactivity evita ese trabajo inútil.

Angular 22: Zoneless, Signals y formularios sincronizados

Angular reescribió su motor de detección. Resultado práctico:

• Renderizado Zoneless: sin interceptar microtasks; si no cambia un Signal, no hay re-render.
• Signals explícitos: control total sobre qué es reactivo y cuándo muta.
• Signal-based Forms: lectura síncrona del estado del formulario, menos RxJS, menos suscripciones que se filtran.

Ejemplo Angular

import { signal } from '@angular/core';

const count = signal(0);
count.set(count() + 1); // solo actualiza los lectores de `count`

Para convivir con código existente, Angular ofrece utilidades toSignal() / toObservable(), facilitando migraciones incrementales. Guía.

Ventajas concretas: trazabilidad, depuración directa (sabes qué mutó), rendimiento determinista. Coste: curva de aprendizaje y refactor en bases de código grandes.

React 19: Reactividad inferida vía compilador y hook use()

React evita imponer nuevos primitivos. Estrategia:

• React Compiler: analiza en build y genera memos/mecanismos de actualización automáticos.
• use(): permite consumir Promises o recursos directamente en render, funcionando con <Suspense> para carga declarativa.
• Server Actions / useActionState: reduce boilerplate del ciclo formulario → servidor → feedback.

Ejemplo React

function Product({ id }) {
  const product = use(fetchProduct(id)); // Suspense maneja loading
  return <div>{product.name}</div>;
}

Ventajas: baja fricción de adopción; equipo no reescribe mentalmente la app. Coste: optimizaciones «invisibles» por el compilador que pueden complicar diagnóstico fino; depuración menos directa que en Angular.

React Suspense referencia

Comparativa práctica (qué esperar en producción)

• Performance pura: ambos escalan mucho mejor que modelos antiguos. Angular da mayor predictibilidad por su modelo explícito; React consigue grandes ganancias sin romper DX.
• Depuración: Angular facilita trazar el origen del update; en React necesitas entender qué transformó el compilador.
• Migración: Angular exige trabajo incremental (conversión de formularios y algunos patrones de RxJS). React permite migración más suave, porque el compilador optimiza el código existente.
• Formularios complejos: Angular gana por tipado y sincronía; React compensa con Server Actions para patrones CRUD.

Recomendaciones prácticas para equipos

1. Haz un piloto con módulos concretos. No migres todo de golpe.
2. Para UIs de alta densidad de datos, prioriza Angular 22 si necesitas control y trazabilidad estricta.
3. Si tu stack ya es Next.js / SSR y quieres mejorar rendimiento sin reeducar al equipo, React 19 es opción pragmática.
4. Añade pruebas de rendimiento (microbenchmarks) y observabilidad: mide renders por segundo, tamaño de paint y memoria.
5. Documenta patrones: en Angular, establece cómo y cuándo crear Signals; en React, especifica cómo instrumentar y auditar transformaciones del compilador.

Conclusión práctica

Signals en Angular 22 y React 19 solucionan el mismo problema con filosofías distintas: Angular te da el control explícito; React te lo facilita automáticamente. No hay «mejor» universal: hay mejor para tu equipo. Si quieres predictibilidad y depurabilidad en sistemas críticos, apuesta por Angular 22. Si prefieres un camino de menor fricción y eres heavy-SSR, React 19 acelera el time-to-market. Dominar fin-grained reactivity es ahora requisito, no lujo.