Angular میں change detection کیسے کام کرتی ہے، اور OnPush کیا کرتا ہے؟

Question

Accepted Answer

**Change detection** یہ ہے کہ Angular DOM کو component ڈیٹا کے ساتھ synchronized رکھتا ہے — کسی بھی ممکنہ state-changing event کے بعد، یہ components کو چیک کرتا ہے اور اس جگہوں پر view update کرتا ہے جہاں ڈیٹا بدلا ہو۔ ڈیفالٹ میں یہ چیکنگ وسیع ہے؛ **`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** کو ہر event پر دوبارہ چیک کرتا ہے — درست، لیکن بڑے درختوں میں ممکنہ طور پر بے کار۔

## OnPush — ان components کو skip کریں جو تبدیل نہیں ہو سکتے

```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 **skip** کرتا ہے اس component کو چیک کرنا جب تک ان میں سے کوئی نہ ہو:

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

یہ بڑے درختوں میں کام کو نمایاں طور پر کم کر سکتا ہے — Angular پورے subtrees کو نظر انداز کرتا ہے جنہیں وہ جانتا ہے کہ تبدیل نہیں ہو سکتے۔

## کلیدی مسئلہ: 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 update کرنا ہوگا (نے objects/arrays)۔ جگہ پر mutate کرنا OnPush کا عام بگ ہے — view update نہیں ہوگا۔

## دستی کنٹرول

```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** updates کو فعال کرتے ہیں (صرف وہ views جو ایک تبدیل شدہ signal کو پڑھتے ہیں)، جو Zone.js کو مکمل طور پر ہٹانے کی طرف اشارہ کرتے ہیں۔

## یہ کیوں اہم ہے

Change detection Angular performance کے لیے مرکزی ہے۔

سمجھنا کہ ڈیفالٹ strategy پورے درخت کو چیک کرتی ہے — اور یہ `OnPush` + immutable ڈیٹا ان components تک checks کو محدود کرتے ہیں جن کے inputs واقعی تبدیل ہوئے — بڑی apps کو optimize کرنے کا بنیادی ذریعہ ہے۔

Immutability requirement اکثر "میرا view update کیوں نہیں ہو رہا؟" bugs کا ایک کثرت سے آنے والا ذریعہ ہے، اور signals یہ ظاہر کرتے ہیں کہ Angular کہاں جا رہا ہے مزید fine-grained، مزید موثر reactivity کے لیے۔