Angular change detection எவ்வாறு செயல்படுகிறது, மேலும் OnPush என்ன செய்கிறது?

Question

Accepted Answer

**Change detection** என்பது component data உடன் DOM-ஐ Angular எவ்வாறு ஒத்திசைவாக வைத்திருக்கிறது என்பதாகும் — state-ஐ மாற்றக்கூடிய எந்த ஒரு event-க்குப் பிறகும், அது components-ஐ சரிபார்த்து, data மாறிய இடங்களில் view-ஐ புதுப்பிக்கிறது. இயல்பாக இந்த சரிபார்ப்பு பரந்ததாக இருக்கும்; **`OnPush`** அதை செயல்திறனுக்காக குறுக்குகிறது.

## இயல்பான 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-ில் செய்யவேண்டிய வேலையை வெகுவாகக் குறைக்க முடியும் — மாறியிருக்க முடியாது என்று தெரிந்த முழு subtrees-ஐயும் Angular புறக்கணிக்கிறது.

## முக்கிய சிக்கல்: 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-ஐ immutable முறையில் (புதிய objects/arrays) புதுப்பிக்க வேண்டும். இடத்திலேயே mutate செய்வது classic 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** updates-ஐ (மாறிய signal-ஐ படிக்கும் views மட்டுமே) செயல்படுத்துகிறது, இது Zone.js-ஐ முழுவதுமாக அகற்றுவதை நோக்கி சுட்டிக்காட்டுகிறது.

## இது ஏன் முக்கியம்

Change detection Angular செயல்திறனுக்கு மையமானது.

இயல்பான strategy முழு tree-ஐயும் சரிபார்க்கிறது என்பதையும் — மேலும் `OnPush` + immutable data சரிபார்ப்புகளை inputs உண்மையில் மாறிய components-க்கு மட்டுமே வரம்பிடுகிறது என்பதையும் புரிந்துகொள்வது பெரிய apps-ஐ optimize செய்வதற்கான முக்கிய நெம்புகோல்.

Immutability தேவை "என் view ஏன் புதுப்பிக்கப்படவில்லை?" என்ற bugs-க்கான அடிக்கடி வரும் ஆதாரமாகும், மேலும் signals என்பது இன்னும் fine-grained, மிகவும் திறமையான reactivity-ஐ நோக்கி Angular செல்லும் திசையைக் குறிக்கிறது.