Hogyan működik az Angular change detection, és mit csinál a OnPush?

Question

Accepted Answer

**A change detection** az a módszer, ahogy az Angular szinkronban tartja a DOM-ot a komponens adataival — bármely potenciálisan state-changing esemény után ellenőrzi a komponenseket és frissíti a nézetet ahol az adatok megváltoztak. Alapértelmezés szerint ez az ellenőrzés széles körű; **`OnPush`** a teljesítmény érdekében korlátozza azt.

## Az alapértelmezett change detection működése

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

Alapértelmezés szerint (`Default` stratégia), az Angular **minden komponenst** újra ellenőriz minden eseménynél — helyes, de potenciálisan pazarló nagy fákon.

## OnPush — olyan komponensek kihagyása, amelyek nem változtak meg

```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` esetén az Angular **kihagyja** ennek a komponensnek az ellenőrzését, hacsak az alábbiak közül az egyik nem fordul elő:

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

Ez drastikusan csökkent lehet a munkáját nagy fákon — az Angular figyelmen kívül hagyja az összes olyan részfát, amely nem változhat meg.

## A fő csapda: megkövetelt az immutabilitás

```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` az inputok **referencia változásaira** támaszkodik, ezért az állapotot immutábilis módon kell frissítenie (új objektumok/tömbök). A helybenvaló mutálás a klasszikus OnPush hiba — a nézet nem fog frissülni.

## Kézi vezérlés

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

## A jövő: signals + zoneless

A jelek még pontosabb, **finomabb** frissítéseket tesznek lehetővé (csak azok a nézetek, amelyek egy megváltoztatott jelet olvasnak), jelezve a Zone.js teljes eltávolítása felé.

## Miért fontos

A change detection központi az Angular teljesítményéhez.

Annak megértése, hogy az alapértelmezett stratégia az egész fát ellenőrzi — és hogy a `OnPush` + immutábilis adatok az ellenőrzéseket csak azokra a komponensekre korlátozzák, amelyek inputjai valóban megváltoztak — az alapvető módszer a nagyobb alkalmazások optimalizálásához.

Az immutabilitás követelménye a "miért nem frissül a nézetem?" hibák gyakori forrása, és a jelek azt mutatják, hogy az Angular hova tart a még finomabb, hatékonyabb reaktivitás érdekében.