Change detection: Default vs OnPush, zone.js vs zoneless

10. Change detection: Default vs OnPush, zone.js vs zoneless

Advanced★ Must knowLesson 10 of 16

Default strategy: after any async event, Angular checks the whole component tree.
ChangeDetectionStrategy.OnPush: a component is checked only when an input reference changes, an event originates in it (or children), an async pipe emits, a signal it reads changes, or markForCheck() is called. Use immutable data. Big performance win.
zone.js patches async APIs (setTimeout, promises, events) to know when to run change detection.
Zoneless (provideZonelessChangeDetection(), default for new apps in v21): no zone.js; change detection is triggered by signals, markForCheck, template events, async pipe → smaller bundles, better performance, clearer stack traces. Third-party code that mutates state outside Angular needs signals or markForCheck.
ChangeDetectorRef: markForCheck(), detectChanges(), detach().
ExpressionChangedAfterItHasBeenCheckedError (dev mode): a binding value changed during the same check cycle (e.g. changing state in ngAfterViewInit) — fix the data flow (compute earlier, use signals, or schedule).