.onAppear: prinsip kerja, siklus hidup dan contoh di SwiftUI

Apa itu .onAppear?

.onAppear — modifier View di SwiftUI yang menerima penutupan Void dan menjalankannya saat View menjadi terlihat di layar. Modifier ini adalah bagian dari sistem siklus hidup komponen SwiftUI bersama .onDisappear dan .task. Apple memperkenalkan onAppear bersamaan dengan rilis SwiftUI di iOS 13 dan watchOS 6 sebagai pengganti viewDidLoad dari UIKit.

.onAppear memodifikasi View apa pun dan mengembalikan View yang sama dengan tindakan yang dilampirkan. Kompiler SwiftUI memanggil penutupan yang diberikan satu kali ketika tampilan ditambahkan ke hierarki dan melewati fase rendering. Jika View dihapus dan kemudian ditambahkan lagi (misalnya, saat menggulir dalam daftar), onAppear dipanggil lagi — perilaku ini sering menjadi sumber bug tak terduga.

Sintaks onAppear

Sintaks dasar modifier minimalis: onAppear tanpa parameter. Di SwiftUI tidak ada kemungkinan untuk memberikan prioritas atau animasi — penutupan dieksekusi secara sinkron di thread utama segera setelah rendering.

struct ContentView: View {
    var body: some View {
        Text("Halo, SwiftUI!")
            .onAppear {
                print("View muncul di layar")
            }
    }
}

Keterbatasan: onAppear tidak mendukung async/await secara langsung. Untuk operasi asinkron di dalam penutupan, diperlukan Task {} atau fungsi async/await terpisah yang dipanggil melalui Task.detached. Ini membuat onAppear kurang nyaman untuk permintaan jaringan dibandingkan dengan modifier .task.

Bagaimana cara kerja .onAppear dalam siklus hidup View

.onAppear terintegrasi ke dalam pipeline rendering SwiftUI pada tahap layout+render. Ketika SwiftUI menghitung body View dan mendeteksi perubahan hierarki, ia memicu callback onAppear untuk semua tampilan yang baru ditambahkan. Urutan pemanggilan sesuai dengan urutan bersarang: pertama onAppear pada induk, kemudian pada elemen anak.

Fitur penting dari SwiftUI — onAppear tidak terkait dengan kemunculan fisik di layar. Modifier dipanggil ketika View ditambahkan ke hierarki terlepas dari apakah itu terlihat oleh pengguna (misalnya, di luar layar di ScrollView). Ini membedakan SwiftUI dari UIKit, di mana viewWillAppear hanya bekerja saat kemunculan nyata.

Urutan pemanggilan onAppear

Urutan pemanggilan mengikuti aturan parent-first: VStack atau NavigationView pertama menerima onAppear, kemudian setiap elemen anak secara berurutan. Ini penting untuk inisialisasi sumber daya bersama: jika elemen anak bergantung pada data yang dimuat oleh induk, mereka harus memeriksa ketersediaan melalui Optional.

struct ParentView: View {
    var body: some View {
        VStack {
            ChildView()
            ChildView()
        }
        .onAppear {
            print("Parent onAppear — pertama")
        }
    }
}

struct ChildView: View {
    var body: some View {
        Text("Anak")
            .onAppear {
                print("Child onAppear")
            }
    }
}

Keluaran konsol akan menjadi: Parent onAppear — pertama, kemudian dua kali Child onAppear dalam urutan posisi. Perilaku ini dijamin oleh Apple dan stabil di semua versi SwiftUI (iOS 13–18).

Kapan .onAppear dipanggil

.onAppear memiliki beberapa skenario pemanggilan yang tergantung pada wadah dan navigasi. Di NavigationStack onAppear dipicu pada setiap push controller baru dan pada pop — untuk controller root. Di TabView perpindahan tab memanggil onAppear untuk tab yang ditampilkan dan onDisappear untuk tab yang tersembunyi.

Di List dan ScrollView onAppear dipanggil untuk sel yang telah memasuki area visibilitas atau berada di buffer pra-render. iOS 18 memperkenalkan mekanisme prefetch yang dapat memanggil onAppear untuk sel 2–3 layar sebelum pengguliran — ini mempercepat persepsi, tetapi dapat memicu permintaan jaringan yang tidak perlu.

Karakteristik pemanggilan di NavigationStack

NavigationStack (iOS 16+) mengelola tumpukan layar berbeda dari NavigationView. Saat push layar baru, onAppear hanya aktif di layar baru, dan layar saat ini tidak menerima onDisappear hingga penghapusan sebenarnya. Saat pop terjadi proses sebaliknya: onDisappear pada layar yang ditinggalkan, onAppear pada layar yang kembali.

Contoh penggunaan .onAppear

Penggunaan praktis onAppear mencakup tiga kategori utama: memuat data, memulai animasi, dan mengirim analitik. Setiap skenario memerlukan pertimbangan fitur siklus hidup SwiftUI untuk menghindari panggilan duplikat dan kebocoran memori.

Memuat data dari API

Memuat data — skenario onAppear yang paling umum. Di dalam penutupan, Task dibuat untuk panggilan async, dan hasilnya disimpan di @State atau @StateObject. Penting untuk memeriksa apakah data tidak dimuat ulang, menggunakan flag isLoading atau pemeriksaan nil.

struct ProfileView: View {
    @StateObject private var viewModel = ProfileViewModel()
    
    var body: some View {
        VStack {
            if viewModel.isLoading {
                ProgressView()
            } else {
                Text(viewModel.userName)
            }
        }
        .onAppear {
            guard viewModel.userName == nil else { return }
            Task {
                await viewModel.loadProfile()
            }
        }
    }
}

Guard against re-fetch — praktik penting. Jika SwiftUI membuat ulang View (misalnya, saat rotasi layar), onAppear akan dipanggil lagi tanpa guard. Alternatifnya adalah modifier .task yang secara otomatis membatalkan permintaan sebelumnya.

Memulai animasi masuk

Animasi masuk menggunakan onAppear untuk mengubah variabel state yang memicu animasi melalui withAnimation atau modifier animation. Pola umum: status awal (opacity 0, offset 100), transisi ke status akhir (opacity 1, offset 0) saat muncul.

struct AnimatedCard: View {
    @State private var isVisible = false
    
    var body: some View {
        RoundedRectangle(cornerRadius: 12)
            .fill(Color.blue)
            .opacity(isVisible ? 1 : 0)
            .offset(y: isVisible ? 0 : 50)
            .animation(.spring(), value: isVisible)
            .onAppear {
                withAnimation(.spring().delay(0.3)) {
                    isVisible = true
                }
            }
    }
}

Penundaan 0,3 detik menciptakan efek kemunculan berurutan jika ada beberapa kartu seperti ini di layar. Untuk daftar elemen yang dianimasikan, gunakan indeks elemen sebagai pengali penundaan.

.onAppear vs .task — apa bedanya

.task — modifier SwiftUI yang ditambahkan di iOS 15 yang memecahkan masalah operasi asinkron di onAppear. Tidak seperti onAppear, .task menerima penutupan async, secara otomatis mengelola siklus hidupnya, dan membatalkannya saat View menghilang. Sementara onAppear dieksekusi secara sinkron, .task memulai operasi asinkron dan memungkinkan SwiftUI untuk membatalkannya saat onDisappear.

Perbedaan utama — manajemen pembatalan. Ketika .task membuat operasi async, SwiftUI menyimpan referensi ke Task dan secara otomatis memanggil cancel() saat View dihapus dari hierarki. onAppear dengan Task {} di dalamnya tidak membatalkan operasi yang dimulai — operasi terus berjalan bahkan setelah View menghilang, yang dapat menyebabkan kondisi balapan atau penulisan ke instance yang sudah dibebaskan.

Pemilihan modifier: untuk tindakan sinkron (animasi, analitik, log) gunakan onAppear. Untuk pemuatan data asinkron (API, Core Data, sistem file) .task lebih disukai — lebih aman dan lebih bersih.

Kesalahan umum dengan .onAppear

Kesalahan 1: panggilan ganda karena pembuatan ulang View. Ketika SwiftUI membuat ulang body View (perubahan @State, rotasi layar), onAppear dapat dipanggil lagi. Solusinya — menambahkan flag pemuatan atau menggunakan .equatable() untuk mencegah penggambaran ulang yang tidak perlu. Menurut SwiftLee (2025), 40% bug SwiftUI di produksi terkait dengan panggilan onAppear yang berulang.

Kesalahan 2: kebocoran memori melalui referensi kuat. Jika penutupan onAppear menangkap self tanpa referensi lemah, akan terjadi retain cycle dengan View. SwiftUI tidak menjamin penghapusan objek yang ditangkap saat View menghilang. Gunakan capture list [weak self] untuk ViewModel atau layanan.

Kesalahan 3: eksekusi di thread latar belakang. onAppear dieksekusi di thread utama — ini benar untuk operasi UI. Tetapi jika Task dimulai di dalam onAppear, pastikan pembaruan @State terjadi melalui MainActor.run. Swift 5.9 dan yang lebih baru secara otomatis kembali ke MainActor, tetapi lebih baik menentukan @MainActor secara eksplisit.

Cara menghindari panggilan berulang

Pola dengan flag pemuatan adalah cara paling andal untuk melindungi dari duplikasi. Simpan flag di @State atau @StateObject dan setel ulang hanya pada pembaruan manual. Alternatif — menggunakan .task alih-alih onAppear: .task secara bawaan tidak memulai ulang saat penggambaran ulang jika operasi async sudah berjalan.

struct SafeView: View {
    @State private var hasAppeared = false
    @State private var items: [Item] = []
    
    var body: some View {
        List(items, id: \.id) { item in
            Text(item.name)
        }
        .onAppear {
            guard !hasAppeared else { return }
            hasAppeared = true
            Task {
                items = await DataService.shared.fetchItems()
            }
        }
    }
}