Πώς λειτουργεί η ανίχνευση αλλαγών στο Angular και τι κάνει το OnPush;

Question

Accepted Answer

Η **ανίχνευση αλλαγών** είναι ο τρόπος με τον οποίο το 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 bug — η προβολή δεν θα ενημερωθεί.

## Χειροκίνητος έλεγχος

```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 ενεργοποιούν ακόμη πιο ακριβείς, **λεπτόκοκκες** ενημερώσεις (μόνο προβολές που διαβάζουν αλλαγμένο σήμα), που δείχνουν προς την πλήρη κατάργηση του Zone.js.

## Γιατί είναι σημαντικό

Η ανίχνευση αλλαγών είναι κεντρική στην απόδοση του Angular.

Η κατανόηση ότι η προεπιλεγμένη στρατηγική ελέγχει ολόκληρο το δέντρο — και ότι το `OnPush` + τα αμετάβλητα δεδομένα περιορίζουν τους ελέγχους σε συστατικά των οποίων οι είσοδοι έχουν πραγματικά αλλάξει — είναι ο κύριος μοχλός για τη βελτιστοποίηση μεγάλων εφαρμογών.

Η απαίτηση αμετάβλητης κατάστασης είναι συχνή πηγή σφαλμάτων "γιατί δεν ενημερώνεται η προβολή μου;", και τα Signals αντιπροσωπεύουν το μέρος προς το οποίο κατευθύνεται το Angular για ακόμη πιο λεπτόκοκκη, πιο αποδοτική αντιδραστικότητα.