Change detection ของ Angular ทำงานอย่างไร และ OnPush ทำหน้าที่อะไร?

Question

Accepted Answer

**Change detection** คือกลไกที่ Angular ใช้เพื่อให้ DOM ซิงค์กับข้อมูลของ component อยู่เสมอ โดยหลังจากเกิดเหตุการณ์ใด ๆ ที่อาจเปลี่ยนแปลง state มันจะตรวจสอบ component ต่าง ๆ และอัปเดต view ในจุดที่ข้อมูลเปลี่ยนไป โดยค่าเริ่มต้นการตรวจสอบนี้จะครอบคลุมเป็นวงกว้าง ส่วน **`OnPush`** จะจำกัดขอบเขตให้แคบลงเพื่อเพิ่มประสิทธิภาพ

## change detection แบบค่าเริ่มต้นทำงานอย่างไร

```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 จะตรวจสอบ **ทุก component** ซ้ำในทุกเหตุการณ์ ซึ่งถูกต้องแต่ก็อาจสิ้นเปลืองในต้นไม้ component ขนาดใหญ่

## OnPush — ข้าม component ที่เป็นไปไม่ได้ที่จะเปลี่ยนแปลง

```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 จะ **ข้าม** การตรวจสอบ component นี้ เว้นแต่จะเกิดเหตุการณ์อย่างใดอย่างหนึ่งต่อไปนี้:

```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 จะมองข้าม subtree ทั้งหมดที่มันรู้ว่าเป็นไปไม่ได้ที่จะเปลี่ยนแปลง

## จุดที่ต้องระวังสำคัญ: ต้องเป็น immutability

```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` พึ่งพา **การเปลี่ยน reference** สำหรับ input ดังนั้นคุณต้องอัปเดต state แบบ immutable (object/array ใหม่) การ mutate ในตำแหน่งเดิมคือบั๊กคลาสสิกของ OnPush เพราะ view จะไม่อัปเดต

## การควบคุมด้วยตนเอง

```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 ช่วยให้อัปเดตได้แม่นยำและ **ละเอียดยิ่งขึ้น** (เฉพาะ view ที่อ่านค่า signal ที่เปลี่ยนเท่านั้น) ซึ่งชี้ไปยังทิศทางการกำจัด Zone.js ออกไปทั้งหมด

## ทำไมจึงสำคัญ

Change detection เป็นหัวใจสำคัญของประสิทธิภาพใน Angular

การเข้าใจว่ากลยุทธ์ค่าเริ่มต้นจะตรวจสอบทั้งต้นไม้ และ `OnPush` + ข้อมูลแบบ immutable จะจำกัดการตรวจสอบให้อยู่เฉพาะ component ที่ input เปลี่ยนแปลงจริง คือคันโยกหลักในการ optimize แอปขนาดใหญ่

ข้อกำหนดเรื่อง immutability เป็นต้นเหตุของบั๊ก "ทำไม view ไม่อัปเดต?" ที่พบบ่อย และ signals แสดงถึงทิศทางที่ Angular กำลังมุ่งไปเพื่อ reactivity ที่ละเอียดและมีประสิทธิภาพยิ่งขึ้น