Angular परिवर्तन पहचान कस्तो काम गर्छ, र OnPush ले के गर्छ?

Question

Accepted Answer

**Change detection** कसरी Angular ले DOM लाई component डेटासँग sync राखछ — कुनै पनि संभावित state-changing event पछि, यो components को जाँच गर्छ र डेटा परिवर्तन भएको ठाउँमा view अपडेट गर्छ। पूर्वनिर्धारितरूपमा यो जाँच व्यापक छ; **`OnPush`** यसलाई कार्यसम्पादनको लागि संकुचित गर्छ।

## Default 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 हरेक event मा **हरेक component** पुनः जाँच गर्छ — सही छ, तर ठूलो 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 को जाँच जब सम्म यीमध्ये एक घटना घट्दैन:

```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** मा निर्भर गर्छ, त्यसैले तपाईले स्थिति 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** अपडेटहरू सक्षम गर्छ (केवल एक परिवर्तन signal को मा पढ्ने views), Zone.js लाई पूरै हटाउने तर्फ संकेत गर्दै।

## किन यो महत्त्वपूर्ण छ

Change detection Angular कार्यसम्पादन को केन्द्रबिन्दु हो।

यह बुझ्नुहोस् कि पूर्वनिर्धारित strategy पूरै tree को जाँच गर्छ — र `OnPush` + immutable डेटा components को जाँचलाई केवल जहाँ inputs वास्तवमा परिवर्तन भएको छ लिमिट गर्छ — ठूलो apps अनुकूल गर्ने मुख्य उत्तोलक हो।

immutability आवश्यकता "मेरो view किन अपडेट हुदैन?" bugs को एक बारम्बार स्रोत हो, र signals Angular को भविष्य प्रतिनिधित्व गर्छ अझै पनि fine-grained, अधिक कुशल reactivity को लागि।