Angular માં change detection કેવી રીતે કાર્ય કરે છે, અને OnPush શું કરે છે?

Question

Accepted Answer

**Change detection** એ કેવી રીતે Angular DOM ને component ડેટા સાથે સિંક રાખે છે — કોઈ પણ સંભવતઃ state-changing ઇવેન્ટ પછી, તે components ચેક કરે છે અને જ્યાં ડેટા બદલાઈ ગયો ત્યાં view અપડેટ કરે છે. ડિફોલ્ટ રીતે આ ચેકિંગ વ્યાપક છે; **`OnPush`** તેને performance માટે સંકુચિત કરે છે.

## ડિફોલ્ટ change detection કેવી રીતે કાર્ય કરે છે

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

ડિફોલ્ટ રીતે (`Default` strategy), Angular **દરેક component** પર દરેક ઇવેન્ટ પર re-checks કરે છે — સાચું, પણ મોટા trees માં સંભવતઃ અવ્યવહારી.

## OnPush — components દાખલ કરો જે બદલાઈ શકતા નથી

```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` સાથે, Angular આ component ની ચેકિંગ **skip** કરે છે જ્યાં સુધી આમાંનું એક થાય ન જાય:

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

મોટા trees માં આ કાર્યમાં નાટ્યધર્મી રીતે ઘટાડો કરી શકે છે — Angular સમગ્ર subtrees અવગણે છે જે બદલાઈ શકતા નથી.

## મુખ્ય gotcha: immutability આવશ્યક છે

```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` inputs માટે **reference changes** પર આધાર રાખે છે, તેથી તમારે state immutably અપડેટ કરવો જોઈએ (નવા objects/arrays). જગ્યায় mutating કરવું એ ક્લાસિક OnPush bug છે — view અપડેટ થશે નહીં.

## મેનુઅલ કંટ્રોલ

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

## ભવિષ્ય: signals + zoneless

Signals વધુ ચોક્કસ, **fine-grained** અપડેટ્સ સક્ષમ કરે છે (ફક્ત views એ બદલાયેલ signal વાંચી રહ્યા છે), Zone.js મુક્તિ તરફ નિર્દેશ કરે છે.

## શા માટે તે મહત્વપૂર્ણ છે

Change detection Angular performance માટે કેન્દ્રીય છે.

મતલબ કે ડિફોલ્ટ strategy આખો tree ચેક કરે છે — અને તે `OnPush` + immutable data components ને ચેકિંગ મર્યાદિત કરે છે જેમાં inputs ખરેખર બદલાઈ ગયા છે — તે મોટા apps ને optimize કરવાનો મુખ્ય lever છે.

Immutability requirement એ વારંવાર "મારો view કેમ અપડેટ થતો નથી?" bugs નો સ્ત્રોત છે, અને signals એ દર્શાવે છે કે Angular કુણવત્તા આવતો છે વધુ fine-grained, વધુ કાર્યક્ષમ reactivity માટે.