คุณจะปรับ performance ของ SwiftUI รอบ ๆ view identity และการ diff อย่างไร?

Question

IT Interview Practice · Accepted Answer

SwiftUI รัน `body` ใหม่ทุกครั้งที่ state ที่ถูก observe เปลี่ยน จากนั้น **diff** ต้นไม้ view ใหม่กับต้นไม้เก่า แล้วอัปเดตเฉพาะส่วนที่ต่างกัน ปัญหาด้านประสิทธิภาพมาจากการทำให้การ diff นั้นทำงานมากเกินไป: **identity** ที่ไม่เสถียร, การ **observe** ที่กว้างเกินไป, และการคำนวณ `body` ที่แพง แก้ได้ด้วยการควบคุม identity, จำกัดขอบเขต state, และทำให้ `body` ราคาถูก

## การ diff และ identity ทำงานอย่างไร

SwiftUI จับคู่ view ข้ามการ render ด้วย **identity** สำหรับ list สิ่งนี้คือ `id`; ถ้า id ไม่เสถียร SwiftUI จะทิ้งแล้วสร้าง view ใหม่ (เสีย state และ animation) แทนที่จะอัปเดตมัน

```swift
// BAD: array index as id — reorders/inserts break identity, full rebuild
ForEach(items.indices, id: \.self) { i in Row(items[i]) }

// GOOD: stable identity tied to the data
ForEach(items) { item in Row(item) }      // items: Identifiable, stable id
```

## การจำกัดขอบเขตการ observe

`ObservableObject` จะ re-render **ทุก** view ที่ observe มัน ทุกครั้งที่ property `@Published` **ใด ๆ** เปลี่ยน ให้แยก model ก้อนใหญ่ออก หรือย้ายไปใช้ **Observation framework** (`@Observable`, iOS 17+) ซึ่งติดตามการอ่าน *ราย property* ดังนั้น view จะ re-render เฉพาะเมื่อ property ที่มันใช้จริงเปลี่ยนเท่านั้น

```swift
@Observable final class Feed {     // iOS 17: fine-grained dependency tracking
    var unreadCount = 0            // a view reading only .posts won't re-render on this
    var posts: [Post] = []
}
```

## ทำให้ body ราคาถูก

`body` รันบ่อย ดังนั้นอย่าทำงานหนักแบบ inline:

```swift
var body: some View {
    List(sortedItems) { ... }      // BAD if sortedItems sorts on every render
}
// GOOD: compute derived data in the model, not in body
```

- แยก subview ออกมาเพื่อให้การเปลี่ยน state re-render view **เล็ก ๆ** ไม่ใช่ทั้งหน้าจอ
- ใช้ `LazyVStack`/`List` สำหรับ collection ขนาดใหญ่ เพื่อไม่ให้ row ที่อยู่นอกจอถูกสร้างขึ้น
- เพิ่ม `.equatable()` หรือ `EquatableView` เพื่อลัดวงจรการ diff บน subtree ที่เสถียร

## ข้อควรระวัง

- `AnyView` ลบ type identity ทิ้งและทำลายการ diff เชิงโครงสร้าง — หลีกเลี่ยงมันใน hot path
- การส่ง closure/array literal ใหม่ในทุกการ render อาจทำให้ child view ใช้ไม่ได้โดยไม่จำเป็น

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

บนจอ ProMotion 120Hz คุณมีเวลาราว 8ms ต่อเฟรม; `body` ที่ sort อาร์เรย์ขนาดใหญ่หรือ re-render list ทั้งอันจะทำให้เฟรมตกและการ scroll กระตุก การสัมภาษณ์ระดับ senior เจาะ view identity และขอบเขตการ observe เพราะนั่นคือจุดที่แอป SwiftUI จริง ๆ ช้าลง — และเป็นจุดที่การแก้ไขอย่างแม่นยำไม่กี่จุดคืนความลื่นไหลกลับมาได้

การ diff และ identity ทำงานอย่างไร

การจำกัดขอบเขตการ observe

ทำให้ body ราคาถูก

ข้อควรระวัง

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

คำถามที่เกี่ยวข้อง