Angular Signals ve Effects

Angular, reaktiviteyi ele alma biçimini değiştirdi. Her küçük değişikliği tespit etmek için artık Zone.js'e ihtiyacınız yok. Signals, Angular'ın yalnızca değişen UI kısımlarını güncellemesine olanak tanır. Bu, uygulamalarınızı daha hızlı hale getirir ve zoneless modu etkinleştirir.

Signals Nedir?

Bir signal, reaktif bir değer için bir kapsayıcıdır. Değer değiştiğinde, Angular şablonun (template) tam olarak hangi kısımlarının güncellenmesi gerektiğini bilir.

  • signal(): Yeni bir signal oluşturur. Bir değeri değiştirmek için .set() veya mevcut değere dayanarak bir değeri güncellemek için .update() kullanın.
  • computed(): Salt okunur (read-only) bir signal oluşturur. Değerini diğer sinyallerden türetir. Angular bunu yalnızca siz okuduğunuzda hesaplar ve sonucu önbelleğe alır.
  • effect(): Bir signal değiştiğinde kod çalıştırır. Günlükleme (logging) veya manuel DOM değişiklikleri gibi yan etkiler (side effects) için bunu kullanın.

Signals vs RxJS: Ne Zaman Hangisi Kullanılmalı?

Birini seçmek zorunda değilsiniz. Farklı görevler için her ikisini de kullanmalısınız.

Şunlar için Signals kullanın:

  • UI durumunu (state) tutmak için.
  • Şablon oluşturmayı (template rendering) yönetmek için.
  • @Input() ve @Output()'un yerini almak için.
  • Zoneless uygulamalarda çalışmak için.

Şunlar için RxJS kullanın:

  • HTTP veya WebSockets gibi asenkron akışları (streams) yönetmek için.
  • Debouncing veya akış değiştirme (switching streams) gibi karmaşık mantıklar için.
  • Birden fazla olay dizisini (event sequences) birleştirmek için.

Bunları rxjs-interop kullanarak birbirine bağlayabilirsiniz:

  • toSignal(): Bir Observable'ı Signal'e dönüştürür.
  • toObservable(): Bir Signal'i Observable'a dönüştürür.

Yeni Decorator Gerektirmeyen API'lar

Angular 17+, decorator kullanmadan veri akışını yönetmenin yeni yollarını sundu.

  • input(): Üst bileşenden (parent) gelen veriler için salt okunur bir signal.
  • model(): İki yönlü bağlama (two-way binding) için yazılabilir bir signal. Eski @Input() ve @Output() deseninin yerini alır.
  • output(): Bir alt bileşenden (child) üst bileşene (parent) olay fırlatmanın (emit) bir yoludur. Bir signal değildir ancak kodunuzu basitleştirir.

Neden React'tan Daha İyi?

Eğer React biliyorsanız, kavramlar benzerdir ancak uygulama biçimi farklıdır.

  • Otomatik Takip: React'ta bağımlılıkları bir dizi içinde listelemeniz gerekir. Angular'da ise sistem, hangi sinyalleri kullandığınızı otomatik olarak takip eder. Bir bağımlılığı unutamazsınız.
  • Hassas Güncellemeler: React genellikle tüm bileşenleri yeniden oluşturur (re-render). Angular sinyalleri ise yalnızca değere bağlı olan belirli DOM düğümlerini günceller.
  • Stale Closures Sorunu Yok: Sinyaller, çağrıldıklarında her zaman güncel değeri sağlar.

Kaynak: https://dev.to/atilla_baspinar_c5c68ec63/angular-signals-and-effects-35mn