Angular change detection ఎలా పనిచేస్తుంది, మరియు OnPush ఏమి చేస్తుంది?

Question

Accepted Answer

**Change detection** అనేది Angular DOM ను component డేటాతో సింక్‌లో ఎలా ఉంచుతుందో — ఏదైనా సంభవించే state-changing ఈవెంట్ తర్వాత, ఇది 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 **ప్రతి 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** పై ఆధారపడి ఉంటుంది, కాబట్టి మీరు state ను immutably (కొత్త objects/arrays) అప్‌డేట్ చేయాలి. స్థానంలో mutate చేయడం కლాసిక్ OnPush బగ్ — 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 డేటా checks ను components కు సీమితం చేస్తుంది, దీని inputs నిజంగా మార్చబడ్డాయని — పెద్ద apps లను ఆప్‌టిమైజ్ చేయడానికి ప్రధాన ఆధారమని అర్థం చేసుకోవడం.

Immutability requirement "నా view ఎందుకు అప్‌డేట్ కాలేదు?" bugs యొక్క పరిచిత తరచుగా ఎదురయ్యే వర్ణించబడిన మూలం, మరియు signals కూడా మరింత fine-grained, మరింత సమర్థమైన reactivity కోసం Angular ఎక్కడ వెళ్తున్నదో సూచిస్తుంది.