Angular में change detection कैसे काम करता है, और OnPush क्या करता है?

Question

Accepted Answer

**Change detection** यह है कि कैसे Angular DOM को component डेटा के साथ सिंक में रखता है — किसी भी संभावित state-changing event के बाद, यह 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** की हर event पर फिर से जांच करता है — सही है, लेकिन बड़े trees में संभवतः अनावश्यक।

## 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 इस 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()
```

यह बड़े trees में काम को नाटकीय रूप से कम कर सकता है — 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 अपडेट करना चाहिए (नए objects/arrays)। जगह में mutate करना 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 करने का मुख्य तरीका है।

Immutability requirement "मेरा view क्यों अपडेट नहीं हो रहा है?" bugs का एक लगातार स्रोत है, और signals यह दर्शाते हैं कि Angular कहां जा रहा है और अधिक fine-grained, अधिक कुशल reactivity के लिए।