Je, change detection ya Angular hufanya kazi vipi, na OnPush hufanya nini?

Question

Accepted Answer

**Change detection** ndiyo jinsi Angular huweka DOM ikiendana na data ya component — baada ya tukio lolote linaloweza kubadilisha hali (state), hukagua components na kusasisha view pale ambapo data imebadilika. Kwa chaguo-msingi ukaguzi huu ni mpana; **`OnPush`** huubana kwa ajili ya utendaji bora.

## Jinsi change detection ya chaguo-msingi hufanya kazi

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

Kwa chaguo-msingi (mkakati wa `Default`), Angular hukagua upya **kila component** kwenye kila tukio — sahihi, lakini huenda ikawa upotevu wa rasilimali katika trees kubwa.

## OnPush — ruka components ambazo haziwezi kuwa zimebadilika

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

Kwa `OnPush`, Angular **huruka** kukagua component hii isipokuwa mojawapo ya mambo haya yatokee:

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

Hili linaweza kupunguza kazi kwa kiasi kikubwa katika trees kubwa — Angular hupuuza subtrees nzima ambazo inajua haziwezi kuwa zimebadilika.

## Jambo kuu la kuangalia: immutability inahitajika

```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` hutegemea **mabadiliko ya reference** kwa inputs, kwa hivyo lazima usasishe state kwa njia ya immutable (objects/arrays mpya). Kubadilisha (mutating) papo hapo ndio bug ya kawaida ya OnPush — view haitasasishwa.

## Udhibiti wa mkono

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

## Wakati ujao: signals + zoneless

Signals huwezesha masasisho ya **fine-grained** yaliyo sahihi zaidi (views zinazosoma signal iliyobadilika pekee), zikielekeza kuelekea kuondoa Zone.js kabisa.

## Kwa nini ni muhimu

Change detection ni kiini cha utendaji wa Angular.

Kuelewa kwamba mkakati wa chaguo-msingi hukagua tree nzima — na kwamba `OnPush` + data ya immutable huzuia ukaguzi kwa components ambazo inputs zake zimebadilika kweli — ndiyo nyenzo kuu ya kuboresha apps kubwa.

Hitaji la immutability ni chanzo cha mara kwa mara cha bugs za "kwa nini view yangu haisasishwi?", na signals zinawakilisha mwelekeo wa Angular kuelekea reactivity yenye ufanisi zaidi na fine-grained zaidi.