Angular change detection ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ OnPush ਕੀ ਕਰਦਾ ਹੈ?

Question

Accepted Answer

**Change detection** ਉਹ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ Angular DOM ਨੂੰ component ਡਾਟਾ ਨਾਲ ਸਿੰਕ ਰੱਖਦਾ ਹੈ — ਕਿਸੇ ਵੀ ਸੰਭਾਵੀ state-changing ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ, ਇਹ components ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ ਅਤੇ 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 ਹਰ ਇਵੈਂਟ ਤੇ **ਹਰ component** ਨੂੰ ਦੁਬਾਰਾ ਜਾਂਚਦਾ ਹੈ — ਸਹੀ ਹੈ, ਪਰ ਵੱਡੇ ਰੁਖਾਂ ਵਿੱਚ ਸੰਭਾਵੀ ਤੌਰ ਤੇ ਬਰਬਾਦ ਹੈ।

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

ਇਹ ਵੱਡੇ ਰੁਖਾਂ ਵਿੱਚ ਕੰਮ ਨੂੰ ਨাਟਕੀ ਢੰਗ ਨਾਲ ਘਟਾ ਸਕਦਾ ਹੈ — 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)। ਜਗ੍ਹਾ ਵਿੱਚ mutating ਕਲਾਸਿਕ 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** updates ਨੂੰ ਸਮਰਥ ਬਣਾਉਂਦੇ ਹਨ (ਸਿਰਫ ਜੋ views ਇੱਕ ਬਦਲੀ ਹੋਈ signal ਨੂੰ ਪੜ੍ਹ ਰਹੇ ਹਨ), Zone.js ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾਉਣ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਦੇ ਹਨ।

## ਇਹ ਕਿਉਂ ਮਾਏਨੇ ਰੱਖਦਾ ਹੈ

Change detection Angular ਪ੍ਰਦਰਸ਼ਨ ਲਈ ਕੇਂਦਰੀ ਹੈ।

ਇਹ ਸਮਝਣਾ ਕਿ ਡਿਫਾਲਟ strategy ਪੂਰੇ ਰੁੱਖ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ — ਅਤੇ `OnPush` + immutable ਡਾਟਾ ਜਾਂਚਾਂ ਨੂੰ ਕੇਵਲ ਉਨ੍ਹਾਂ components ਤੱਕ ਸੀਮਿਤ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਦੀ inputs ਅਸਲ ਵਿੱਚ ਬਦਲ ਗਈ ਹੈ — ਵੱਡੀਆਂ apps ਨੂੰ optimize ਕਰਨ ਲਈ ਮੁੱਖ leverage ਹੈ।

immutability ਲਾਜ਼ਮੀ ਹੋਣਾ "ਮੇਰਾ view ਕਿਉਂ update ਨਹੀਂ ਹੋ ਰਿਹਾ?" bugs ਦਾ ਇੱਕ ਅਕਸਰ ਸਰੋਤ ਹੈ, ਅਤੇ signals ਉਹ ਜਗ੍ਹਾ ਦਰਸਾਉਂਦੇ ਹਨ ਜਿੱਥੇ Angular ਜਾ ਰਿਹਾ ਹੈ ਹੋਰ ਵੀ fine-grained, ਵਧੇਰੇ ਸਮਰਥ reactivity ਲਈ।