@State — apa itu, tujuan dan penggunaan di SwiftUI

Apa itu @State di SwiftUI?

@State adalah Property Wrapper bawaan di SwiftUI yang memungkinkan tampilan menyimpan dan melacak statusnya sendiri. Ketika nilai @State berubah, SwiftUI secara otomatis menggambar ulang tampilan dengan memanggil ulang properti body. Ini adalah dasar dari pemrograman reaktif di SwiftUI: pengembang mendeklarasikan status, dan framework menangani sinkronisasi antarmuka.

@State menciptakan area penyimpanan di heap yang dikelola oleh SwiftUI. Area ini persisten — ia bertahan dari inisialisasi berulang struktur tampilan yang terjadi setiap render. SwiftUI menggunakan pengidentifikasi tampilan (dihasilkan berdasarkan posisi dalam hierarki) untuk mengikat properti @State ke tampilan tertentu. Berkat ini, status tidak diatur ulang saat tampilan induk diperbarui.

Batasan penting: @State hanya ditujukan untuk tipe nilai (struktur, enumerasi, primitif). Untuk tipe referensi (kelas) gunakan @StateObject atau @ObservedObject. Jika Anda menetapkan kelas ke properti @State, SwiftUI tidak akan dapat mendeteksi perubahan di dalam objek — hanya penggantian seluruh referensi.

Bagaimana @State bekerja di balik layar?

SwiftUI mengimplementasikan @State melalui mekanisme internal Storage. Setiap properti @State mendapatkan sel memori khusus yang disimpan dalam wadah penyimpanan khusus tampilan. Ketika penulisan ke wrappedValue terjadi, SwiftUI melalui didSet memberitahu grafik ketergantungannya (dependency graph) tentang perlunya penggambaran ulang.

struct ContentView: View {
    @State private var name: String = "User"
    @State private var isLoggedIn: Bool = false

    var body: some View {
        VStack {
            Text("Halo, \(name)")
            Button(isLoggedIn ? "Keluar" : "Masuk") {
                isLoggedIn.toggle()
            }
        }
    }
}

Dalam contoh ada dua properti @State: name (String) dan isLoggedIn (Bool). Saat isLoggedIn.toggle() dipanggil, SwiftUI menandai ContentView sebagai memerlukan pembaruan dan menjalankan ulang body di siklus render berikutnya. Poin kunci: properti @State selalu dideklarasikan dengan pengubah private — ini adalah sinyal bahwa status hanya milik tampilan saat ini dan tidak boleh diubah dari luar secara langsung.

Untuk mengamati perubahan, SwiftUI menggunakan CurrentValueSubject dari Combine. Setiap properti @State menciptakan penerbit tersembunyi yang memberi tahu sistem pada setiap perubahan. Ini memungkinkan SwiftUI untuk menggambar ulang hanya kumpulan tampilan yang minimal diperlukan, menghindari pembaruan penuh hierarki.

Kapan menggunakan @State di proyek

@State optimal untuk status lokal sederhana: bidang teks pencarian, bendera boolean untuk jendela modal, sakelar pengaturan, penghitung, elemen daftar yang dipilih. Jika nilai hanya digunakan dalam satu tampilan dan komponen bersarangnya (melalui @Binding), @State adalah pilihan yang tepat. Untuk status yang harus bertahan setelah tampilan ditutup (misalnya data formulir), @State juga cocok selama tampilan tetap dalam hierarki.

• Bidang teks — @State untuk menyimpan teks yang dimasukkan di TextField
• Bendera boolean — @State untuk menampilkan/menyembunyikan jendela modal dan sheet
• Pemilihan elemen — @State untuk melacak tab atau baris yang dipilih
• Penghitung — @State untuk nilai numerik dengan kenaikan/penurunan
• Perhitungan sementara — @State untuk menyimpan cache hasil di dalam tampilan

Jangan gunakan @State untuk status global aplikasi, menyimpan cache data jaringan atau objek yang digunakan di beberapa layar. Untuk tujuan ini gunakan @StateObject dan @EnvironmentObject. @State juga tidak cocok untuk menyimpan data dalam jumlah besar — setiap kali berubah, seluruh tampilan akan digambar ulang.

@State dan @Binding: bekerja bersama

@Binding adalah jembatan antara @State di tampilan induk dan tampilan anak yang perlu mengubah status ini. Induk mendeklarasikan @State, dan komponen anak menerima Binding melalui proyeksi $. Perubahan Binding di tampilan anak secara otomatis memperbarui @State di induk — dan sebaliknya. Ini memastikan aliran data satu arah dengan kemungkinan umpan balik.

struct ParentView: View {
    @State private var text: String = ""

    var body: some View {
        ChildView(text: $text)
    }
}

struct ChildView: View {
    @Binding var text: String

    var body: some View {
        TextField("Enter text", text: $text)
    }
}

Dalam listing, ParentView memiliki @State text, dan ChildView menerima $text sebagai Binding. TextField di dalam ChildView terikat ke Binding ini melalui text: $text. Ketika pengguna mengetik di TextField, nilainya berubah di ChildView melalui Binding, yang menyebabkan pembaruan @State di ParentView. Kedua tampilan digambar ulang dengan nilai baru.

Kesalahan umum saat bekerja dengan @State

Kesalahan paling umum — menetapkan kelas ke properti @State. Jika Anda menulis @State var model = MyClass(), SwiftUI tidak akan dapat melacak perubahan properti di dalam kelas — hanya penggantian objek itu sendiri. Untuk kelas selalu gunakan @StateObject. Masalah umum kedua — mendeklarasikan @State tanpa pengubah private, yang melanggar prinsip enkapsulasi status.

Memberikan @State secara langsung ke tampilan anak tanpa $ — kesalahan umum lainnya. Jika Anda memberikan TextField(text: text) alih-alih TextField(text: $text), komponen anak akan menerima string biasa, bukan Binding. Perubahan teks di TextField tidak akan disinkronkan dengan @State induk. Selalu gunakan proyeksi $ untuk memberikan Binding.

Kesalahan ketiga — beberapa properti @State untuk data yang terkait. Jika beberapa nilai secara logis membentuk satu kesatuan (misalnya bidang formulir), gabungkan mereka menjadi satu struktur dengan satu @State. Ini menyederhanakan pemberian status ke tampilan anak dan mengurangi jumlah pemicu pembaruan terpisah.

Contoh penggunaan @State di SwiftUI

@State digunakan di sebagian besar proyek SwiftUI untuk interaktivitas dasar. Mari kita lihat contoh formulir masuk, di mana @State mengelola bidang teks dan status pemuatan. Pola ini ditemukan di setiap aplikasi — dari catatan sederhana hingga solusi perusahaan yang kompleks.

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var isLoading: Bool = false
    @State private var errorMessage: String?

    var body: some View {
        Form {
            TextField("Email", text: $email)
            SecureField("Password", text: $password)
            Button("Masuk") {
                login()
            }.disabled(isLoading)
        }
    }

    private func login() {
        isLoading = true
        // Lakukan permintaan jaringan
    }
}

Dalam contoh ada empat properti @State: email dan password untuk bidang formulir, isLoading untuk indikasi pemuatan dan errorMessage untuk menampilkan kesalahan. Setiap properti secara mandiri mengelola bagian antarmukanya sendiri. Saat isLoading berubah, tombol secara otomatis diblokir melalui disabled(isLoading) — tanpa pembaruan UI manual.