Paparange Angular nindakake work, lan apa sing OnPush gawe?

Question

Accepted Answer

**Change detection** yaiku cara Angular njaga DOM tetep sinkron karo data komponen — sawise acara apa wae sing bisa ngganti state, mriksa komponen lan nganyari view ing mana data wis owah. Secara bawaan pamariksa iki luwes; **`OnPush`** nyuda kanggo performance.

## Paparange change detection default nindakake

```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 bawaan (`Default` strategy), Angular mriksa ulang **saben komponen** ing saben acara — bener, nanging bisa ala ing wit sing gedhe.

## OnPush — lewati komponen sing ora bisa owah

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

Karo `OnPush`, Angular **lewati** pamriksan komponen iki kajaba salah siji saka iki sing kedadeyan:

```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 bisa nyuda jerji gedhe ing wit gedhe — Angular ora mriksa sub-wit lengkap sing diarani ora bisa owah.

## Kayadhian utama: immutability diperlokake

```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` gumantung ing **ngganti referensi** kanggo inputs, mula sampeyan kudu nganyari state sacara immutable (obyek/array anyar). Ngganti ing panggonan yaiku bug OnPush klasik — view ora bakal nganyari.

## 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 ngaktifake nganyari sing luwih presisi, **fine-grained** (mung view sing maca signal sing owah), nunjukake nana Zone.js lengkap.

## Kenapa iku penting

Change detection yaiku pusat performance Angular.

Ngerti yen strategy bawaan mriksa wit lengkap — lan yen `OnPush` + data immutable mbatesi pamriksan kanggo komponen sing inputs bener-bener owah — yaiku pengungkit utama kanggo optimasi app gedhe.

Kebutuhan immutability yaiku asal sering bug "kenapa view ku ora nganyari?", lan signals nuduhake ngendi Angular ing mrana kanggo reactivity sing luwih fine-grained, leuwih efisien.