Angular'ın değişiklik algılaması nasıl çalışır ve OnPush ne yapar?

Question

Accepted Answer

**Değişiklik algılaması**, Angular'ın DOM'u bileşen verileriyle senkronize tutma yöntemidir — durumu değiştirebilecek herhangi bir olay sonrasında, bileşenleri kontrol eder ve verilerin değiştiği yerlerde görünümü günceller. Varsayılan olarak bu kontrol geniş kapsamlıdır; **`OnPush`** performans için kapsamını daraltır.

## Varsayılan değişiklik algılaması nasıl çalışır

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

Varsayılan olarak (`Default` stratejisi), Angular **her bileşeni** her olay üzerinde yeniden kontrol eder — doğru ancak büyük ağaçlarda potansiyel olarak savurgandır.

## OnPush — değişmemiş olabilecek bileşenleri atla

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

`OnPush` ile, Angular **bu bileşeni atlar** ve aşağıdakilerden biri gerçekleşmediği sürece kontrol etmez:

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

Bu, büyük ağaçlarda işi dramatik şekilde azaltabilir — Angular değişemeyeceğini bildiği tüm alt ağaçları yok sayar.

## Temel sorun: immutability gerekli

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush`, girdiler için **referans değişikliklerine** bağlıdır, bu nedenle durumu değiştirilemez şekilde güncellemelisiniz (yeni nesneler/diziler). Yerinde mutasyon yapmak, klasik OnPush hatası olup — görünüm güncellenmeyecektir.

## Manuel kontrol

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## Gelecek: signals + zoneless

Signals, daha da hassas, **ince taneli** güncellemeleri etkinleştirir (yalnızca değiştirilen bir sinyal okuyan görünümler), Zone.js'i tamamen kaldırma yönünde işaret eder.

## Neden önemli

Değişiklik algılaması Angular performansının merkezindedir.

Varsayılan stratejinin tüm ağacı kontrol ettiğini ve `OnPush` + değiştirilemez veri ile kontrollerin yalnızca girdileri gerçekten değişen bileşenlere sınırlandığını anlamak, büyük uygulamaları optimize etmek için ana yöntemdir.

Değiştirilemezlik gerekliği, "neden görünümüm güncellenmediği?" hatalarının sık kaynağıdır ve signals, Angular'ın daha ince taneli, daha verimli reaktivite için nereye gittiğini temsil eder.