Bagaimana kamu mengoptimalkan performa SwiftUI terkait view identity dan diffing?

Question

IT Interview Practice · Accepted Answer

SwiftUI menjalankan ulang `body` setiap kali observed state berubah, lalu melakukan **diff** pada view tree baru terhadap yang lama dan hanya memperbarui apa yang berbeda. Masalah performa datang dari membuat diff itu melakukan terlalu banyak pekerjaan: **identitas** yang tidak stabil, **observasi** yang terlalu luas, dan komputasi `body` yang mahal. Perbaiki dengan mengendalikan identitas, membatasi scope state, dan menjaga `body` tetap murah.

## Bagaimana diffing dan identitas bekerja

SwiftUI mencocokkan view lintas render berdasarkan **identitas**. Untuk list ini adalah `id`; jika id-nya tidak stabil, SwiftUI membuang dan membangun ulang view (kehilangan state dan animasi) alih-alih memperbaruinya.

```swift
// BURUK: index array sebagai id — reorder/insert merusak identitas, rebuild penuh
ForEach(items.indices, id: \.self) { i in Row(items[i]) }

// BAIK: identitas stabil yang terikat pada data
ForEach(items) { item in Row(item) }      // items: Identifiable, id stabil
```

## Membatasi scope observasi

Sebuah `ObservableObject` merender ulang **setiap** view yang mengobservasinya setiap kali **suatu** property `@Published` berubah. Pecah model besar, atau beralih ke **Observation framework** (`@Observable`, iOS 17+), yang melacak pembacaan *per-property* sehingga sebuah view hanya merender ulang ketika property yang benar-benar dipakainya berubah.

```swift
@Observable final class Feed {     // iOS 17: pelacakan dependency yang halus
    var unreadCount = 0            // view yang hanya membaca .posts tidak akan render ulang karena ini
    var posts: [Post] = []
}
```

## Menjaga body tetap murah

`body` berjalan sering, jadi jangan pernah melakukan pekerjaan berat secara inline:

```swift
var body: some View {
    List(sortedItems) { ... }      // BURUK jika sortedItems menyortir pada setiap render
}
// BAIK: hitung data turunan di model, bukan di body
```

- Ekstrak subview agar sebuah perubahan state merender ulang view yang **kecil**, bukan seluruh layar.
- Gunakan `LazyVStack`/`List` untuk collection besar agar baris di luar layar tidak dibangun.
- Tambahkan `.equatable()` atau `EquatableView` untuk men-short-circuit diffing pada subtree yang stabil.

## Jebakan

- `AnyView` menghapus type identity dan mengalahkan structural diffing — hindari di hot path.
- Mengoper literal closure/array baru pada setiap render bisa membatalkan child view secara tidak perlu.

## Mengapa ini penting

Pada layar ProMotion 120Hz kamu punya ~8ms per frame; sebuah `body` yang menyortir array besar atau merender ulang seluruh list akan menjatuhkan frame dan membuat scroll tersendat. Wawancara senior menyelidiki view identity dan scope observasi karena di situlah aplikasi SwiftUI nyata menjadi lambat — dan di situlah beberapa perbaikan yang presisi memulihkan kehalusan.

Bagaimana diffing dan identitas bekerja

Membatasi scope observasi

Menjaga body tetap murah

Jebakan

Mengapa ini penting

Pertanyaan terkait