Kif jaħdem il-iskoperta tal-bidliet ta' Angular, u x'jagħmel OnPush?

Question

IT Interview Practice · Accepted Answer

**Change detection** huwa kif Angular iżomm il-DOM sinkronizzat mad-data tal-komponenti — wara kwalunkwe avveniment li potenzjalment ixxangia l-istat, tikkontestja l-komponenti u taqarraq il-vista fejn id-data tbiddlet. B'mod default dan il-kontroll huwa wiesgħa; **`OnPush`** iddaqq isfel għall-prestazzjoni.

## Kif jaħdem il-iskoperta tal-bidliet impliċita

```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.
```

B'mod default (`Default` strateġija), Angular tikkontestja mill-ġdid **kull komponenti** fuq kull avveniment — korrett, imma potenzjalment vuċċ ta' zgħira fl-irħula kbira.

## OnPush — aqbeż il-komponenti li ma jistgħux ibbiddlu

```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;
}
```

B'`OnPush`, Angular **aqbeż** il-kontroll ta' dan il-komponenti ħlief li wieħed minn dawn jiġri:

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

Dan jista' b'mod drammatiku jnaqqas il-ħidma fl-irħula kbira — Angular tinjora l-irħula ta' taħt kollha li tkun taf li ma jistgħux ibbiddlu.

## Il-kewwa ewlenija: immutabilità meħtieġa

```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` jiddependi fuq **bidliet tad-riferenza** għall-inputs, għalhekk trid taqarraq l-istat immutably (oġġetti/arrays ġodda). Il-mutazzjoni fuq il-post huwa l-bug klassiku ta' OnPush — il-vista mhux se taqarraq.

## Il-kontroll manuali

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## Il-futur: signals + zoneless

Signals ippermetti aġġornamenti aktar preċiżi, **fine-grained** (biss il-views li qiegħda taqra signal mibdula), u tipponta lejn ir-rimoċċjoni sħiħa ta' Zone.js.

## Għaliex huwa importanti

L-iskoperta tal-bidliet hija ċentrali għall-prestazzjoni ta' Angular.

L-fehim li l-istrateġija impliċita tikkontestja l-irħula kollha — u li `OnPush` + data immutable jillimitaw il-kontroll għal komponenti li l-inputs tagħhom realment ibiddlu — huwa l-leva ewlenija għat-tittħaffif ta' apps kbira.

Ir-rekwiżit ta' immutabilità huwa sors frekwenti ta' bugs "għaliex il-vista tiegħi mhix aqarraq?", u signals jirrappreżentaw fejn qed imxi Angular għal reaktività aktar fine-grained u effiċjenti.

Kif jaħdem il-iskoperta tal-bidliet impliċita

OnPush — aqbeż il-komponenti li ma jistgħux ibbiddlu

Il-kewwa ewlenija: immutabilità meħtieġa

Il-kontroll manuali

Il-futur: signals + zoneless

Għaliex huwa importanti

Mistoqsijiet relatati