Si funksionon detektimi i ndryshimeve në Angular, dhe çfarë bën OnPush?

Question

Accepted Answer

**Detektimi i ndryshimeve** është se si Angular mban DOM-in të sinkronizuar me të dhënat e komponentit — pas çdo ngjarjeje që potencialisht ndryshon gjendjen, ai kontrollon komponentët dhe përditëson pamjen ku u ndryshuan të dhënat. Si parazgjedhje, ky kontroll është i gjerë; **`OnPush`** e ngushtë për performancë.

## Si funksionon detektimi i parazgjedhur i ndryshimeve

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

Si parazgjedhje (`Default` strategy), Angular rinumëron **secilin komponent** në çdo ngjarje — i saktë, por potencialisht shpenzues në pemë të mëdha.

## OnPush — kaperceni komponentët që nuk mund të kenë ndryshuar

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

Me `OnPush`, Angular **kapërce** kontrollin e këtij komponenti përveç nëse ndodh një nga këto:

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

Këto mund të reduktojnë ndjeshëm punën në pemë të mëdha — Angular injoron nënpemët e tëra që di se nuk mund të kenë ndryshuar.

## Gadishmëria kryesore: kërkohet pamushmëria

```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` mbështetet në **ndryshimet e referencës** për inputet, kështu që duhet të përditësoni gjendjen në mënyrë të pamushmur (objekte/fusha të reja). Mutimi në vend është gabimi klasik i OnPush — pamja nuk do të përditësohet.

## Kontrolli manual

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

## E ardhmen: sinjalet + zoneless

Sinjalet mundësojnë përditësimet edhe më të suksesshme, **të imëta** (vetëm pamjet që lexojnë një sinjal të ndryshuar), duke treguar drejt heqjes së plotë të Zone.js.

## Përse ka rëndësi

Detektimi i ndryshimeve është qendror për performancën e Angular.

Kuptimi se strategjia parazgjedhur kontrollon të gjithë pemën — dhe se `OnPush` + të dhënat e pamushmura kufizon kontrollet në komponentët, inputet e të cilëve në të vërtetë ndryshuan — është levoja kryesore për optimizimin e aplikacioneve të mëdha.

Kërkesa për pamushmëri është një burim i shpeshtë i gabimeve "pse pamja ime nuk përditësohet?", dhe sinjalet përfaqësojnë drejtimin drejt të cilit Angular shkon për reaktivitetin edhe më të imëtë dhe më efikas.