Signals en Angular: El futuro de la reactividad
Cómo los signals están transformando la forma en que manejamos el estado en aplicaciones Angular modernas.
Angular ha dado un paso gigante con la introducción de Signals, un nuevo modelo de reactividad que promete simplificar la forma en que manejamos el estado en nuestras aplicaciones.
¿Qué son los Signals?
Un Signal es un envoltorio alrededor de un valor que notifica a los consumidores interesados cuando ese valor cambia. A diferencia de los Observables de RxJS, los Signals son síncronos y siempre tienen un valor actual.
const count = signal(0);
const doubled = computed(() => count() * 2);
effect(() => {
console.log('Count:', count(), 'Doubled:', doubled());
});Ventajas sobre el modelo anterior
El modelo basado en Zone.js requería ejecutar la detección de cambios en todo el árbol de componentes. Con Signals, Angular sabe exactamente qué cambió y actualiza solo lo necesario.
- Rendimiento granular: Solo se re-renderizan los componentes afectados.
- API simple: No necesitas entender Observables para manejar estado reactivo.
- Composición: Los
computed()derivan estado de forma declarativa. - Integración con RxJS: Puedes convertir entre Signals y Observables fácilmente.
Signal Inputs y Model Inputs
Angular ahora permite declarar inputs como signals, lo que facilita la reactividad en componentes:
@Component({ ... })
export class UserCard {
name = input.required<string>();
age = input(0);
greeting = computed(() =>
`Hola, ${this.name()}! Tienes ${this.age()} años.`
);
}El futuro: Zoneless Angular
Con Signals como base, Angular se dirige hacia un futuro sin Zone.js. Esto significa aplicaciones más ligeras, arranques más rápidos y un modelo mental más claro para los desarrolladores.
Si estás comenzando un proyecto nuevo con Angular, adoptar Signals desde el inicio es la decisión correcta. Para proyectos existentes, la migración es gradual y compatible con el código actual.
