Bagaimana pengesanan perubahan Angular berfungsi, dan apa yang dilakukan OnPush?

Question

Accepted Answer

**Change detection** adalah bagaimana Angular menjaga DOM tetap sinkron dengan data komponen — setelah peristiwa yang berpotensi mengubah status apa pun, ia memeriksa komponen dan memperbarui tampilan di mana data telah berubah. Secara default pemeriksaan ini luas; **`OnPush`** menyempitkannya untuk kinerja.

## Cara pengesanan perubahan default berfungsi

```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 ulang **setiap komponen** pada setiap peristiwa — benar, tetapi berpotensi sia-sia pada pohon besar.

## OnPush — lewati komponen yang tidak dapat 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 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` bergantung pada **perubahan referensi** untuk input, jadi Anda harus memperbarui status secara immutable (objek/array baru). Mutasi di tempat adalah bug OnPush klasik — tampilan 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 pembaruan yang lebih presisi, **butir halus** (hanya tampilan yang membaca signal yang berubah), menunjuk ke arah penghapusan Zone.js sepenuhnya.

## Mengapa ini penting

Pengesanan perubahan adalah pusat kinerja Angular.

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

Kebutuhan immutabilitas adalah sumber umum bug "mengapa tampilan saya tidak diperbarui?", dan signals mewakili ke mana Angular menuju untuk reaktivitas yang lebih butir halus dan efisien.