Bagaimana Angular change detection bekerja, dan apa yang dilakukan OnPush?

Question

Accepted Answer

**Change detection** adalah cara Angular menjaga DOM tetap sinkron dengan data komponen — setelah peristiwa yang berpotensi mengubah state, ia memeriksa komponen dan memperbarui view di mana data berubah. Secara default, pemeriksaan ini luas; **`OnPush`** mempersempitnya untuk performa.

## Cara change detection default bekerja

```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.
```

Secara default (strategi `Default`), Angular memeriksa kembali **setiap komponen** pada setiap peristiwa — benar, tetapi berpotensi sia-sia di pohon besar.

## OnPush — lewati komponen yang tidak mungkin berubah

```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;
}
```

Dengan `OnPush`, Angular **melewati** pemeriksaan komponen ini kecuali salah satu dari hal ini terjadi:

```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()
```

Ini dapat secara dramatis mengurangi pekerjaan di pohon besar — Angular mengabaikan seluruh subpohon yang diketahui tidak dapat berubah.

## Jebakan utama: immutabilitas diperlukan

```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` mengandalkan **perubahan referensi** untuk input, jadi Anda harus memperbarui state secara immutable (objek/array baru). Mutasi di tempat adalah bug OnPush klasik — view tidak akan diperbarui.

## Kontrol manual

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

## Masa depan: signals + zoneless

Signals memungkinkan update yang lebih presisi dan **fine-grained** (hanya view yang membaca signal yang berubah), menunjuk ke penghapusan Zone.js sepenuhnya.

## Mengapa ini penting

Change detection adalah pusat performa Angular.

Memahami bahwa strategi default memeriksa seluruh pohon — dan bahwa `OnPush` + data immutable membatasi pemeriksaan ke komponen yang inputnya benar-benar berubah — adalah lever utama untuk mengoptimalkan aplikasi besar.

Persyaratan immutabilitas adalah sumber umum bug "mengapa view saya tidak diperbarui?", dan signals mewakili arah Angular menuju update yang lebih fine-grained dan reaktivitas yang lebih efisien.