Angular Signals: La Revolución de la Reactividad en Angular 17+

¿Qué son los Signals en Angular?

Los Signals representan un cambio fundamental en cómo Angular maneja la reactividad. A diferencia de Zone.js que monitorea todo el código de forma automática, los Signals ofrecen un sistema de reactividad granular y explícito que mejora significativamente el rendimiento de nuestras aplicaciones.

Ventajas de usar Signals

1. Rendimiento mejorado: Solo se actualizan los componentes que realmente necesitan cambiar
2. Código más limpio: La reactividad es explícita y fácil de seguir
3. Mejor debugging: Es más sencillo rastrear el flujo de datos
4. Interoperabilidad: Funcionan perfectamente con RxJS

Ejemplo básico de Signals

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Contador: {{ count() }}</p>
      <p>Doble: {{ doubleCount() }}</p>
      <button (click)="increment()">Incrementar</button>
    </div>
  `
})
export class CounterComponent {
  count = signal(0);
  doubleCount = computed(() => this.count() * 2);

  increment() {
    this.count.update(value => value + 1);
  }
}

Signals vs RxJS: ¿Cuándo usar cada uno?

Usa Signals cuando:

• Necesites estado local del componente
• Quieras reactividad síncrona
• Busques simplicidad y rendimiento

Usa RxJS cuando:

• Trabajes con operaciones asíncronas complejas
• Necesites operadores avanzados (debounce, throttle, etc.)
• Manejes streams de eventos

Computed Signals: Valores derivados

Los computed signals son perfectos para valores que dependen de otros signals. Se recalculan automáticamente cuando sus dependencias cambian:

const firstName = signal('Osman');
const lastName = signal('Jimenez');
const fullName = computed(() => `${firstName()} ${lastName()}`);

Effect: Reaccionar a cambios

Los effects permiten ejecutar código cuando un signal cambia:

effect(() => {
  console.log(`El contador cambió a: ${this.count()}`);
  // Guardar en localStorage, hacer peticiones HTTP, etc.
});

Conclusión

Los Signals son el futuro de Angular. Aunque Zone.js seguirá siendo soportado, la comunidad está migrando hacia este nuevo paradigma que ofrece mejor rendimiento, código más limpio y una experiencia de desarrollo superior. Si estás empezando un nuevo proyecto en Angular 17+, definitivamente deberías considerar usar Signals desde el inicio.

¿Ya has probado Signals en tus proyectos? Comparte tu experiencia en los comentarios.