Angular मध्ये बदल शोधण्याची प्रक्रिया कशी कार्य करते आणि OnPush काय करते?

Question

Accepted Answer

**Change detection** हे Angular चे DOM घटकाच्या डेटासह संतुलित ठेवण्याचा मार्ग आहे — कोणत्याही संभाव्य स्थिती बदलणारी घटना नंतर, हे घटक तपासते आणि दृश्य अद्यतन करते जेथे डेटा बदलले आहे. डिफॉल्टनुसार हे तपास विस्तृत आहे; **`OnPush`** कार्यक्षमतेच्या कारणार्थ हे सीमित करते.

## डिफॉल्ट बदल शोधण्याची प्रक्रिया कशी कार्य करते

```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` कौशल्य), Angular प्रत्येक घटनेवर **प्रत्येक घटक** पुन्हा तपासते — बरोबर, परंतु मोठ्या झाडांमध्ये संभाव्यपणे अपव्ययी.

## OnPush — ज्या घटक बदलू शकत नाहीत त्या वगळा

```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 यापैकी एकही घडले नाही तर या घटकाची तपासणी **वगळते**:

```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 संपूर्ण उप-झाड विचारात घेते जे ते बदलू शकत नाहीत.

## मुख्य समस्या: अपरिवर्तनीयता आवश्यक

```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` इनपुटसाठी **संदर्भ बदल** वर अवलंबून असते, म्हणून आपण स्थिती अपरिवर्तनीयरित्या अपडेट केली पाहिजे (नवीन वस्तू/अरे). जागेतून बदल करणे हे OnPush चा क्लासिक बग आहे — दृश्य अपडेट होणार नाही.

## व्यक्तिगत नियंत्रण

```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 अधिक अचूक, **बारीक-दाणेदार** अपडेट सक्षम करते (फक्त दृश्य जे बदलले signal वाचत आहेत), पूर्ण Zone.js काढून टाकण्याकडे सूचित करते.

## हे महत्वाचे का आहे

बदल शोधण्याची प्रक्रिया Angular कार्यक्षमतेचे केंद्र आहे.

हे समजून घेतल्याने की डिफॉल्ट कौशल्य संपूर्ण झाड तपासते — आणि `OnPush` + अपरिवर्तनीय डेटा तपास उन्हीं घटकांपर्यंत मर्यादित करते ज्यांचे इनपुट प्रत्यक्षपणे बदलले आहेत — हा मोठ्या अ‍ॅप्लिकेशनच्या ऑप्टिमाइজेशनसाठी मुख्य लीव्हर आहे.

अपरिवर्तनीयतेची आवश्यकता "माझा दृश्य अपडेट का होत नाही?" बगचा वारंवार स्रोत आहे, आणि signals अधिक बारीक-दाणेदार, अधिक कुशल प्रतिक्रियाशीलतेच्या दिशेने Angular कुठे जात आहे हे दर्शवते.