@State — wat is het, doel en gebruik in SwiftUI

Wat is @State in SwiftUI?

@State is een ingebouwde Property Wrapper in SwiftUI waarmee een weergave zijn eigen staat kan opslaan en volgen. Wanneer de waarde van @State verandert, hertekent SwiftUI automatisch de weergave door de body-eigenschap opnieuw aan te roepen. Dit is de basis van reactief programmeren in SwiftUI: de ontwikkelaar declareert de staat en het framework neemt de synchronisatie van de interface voor zijn rekening.

@State creëert een opslagruimte op de heap die door SwiftUI wordt beheerd. Deze ruimte is persistent — ze overleeft herhaalde initialisaties van de weergavestructuur die bij elke render plaatsvinden. SwiftUI gebruikt de identiteit van de weergave (gegenereerd op basis van de positie in de hiërarchie) om de @State-eigenschap aan een specifieke weergave te koppelen. Hierdoor wordt de staat niet gereset bij het bijwerken van de bovenliggende weergave.

Een belangrijke beperking: @State is alleen bedoeld voor waardetypen (structuren, enumeraties, primitieven). Voor referentietypen (klassen) gebruik je @StateObject of @ObservedObject. Als je een klasse aan een @State-eigenschap toewijst, kan SwiftUI wijzigingen binnen het object niet detecteren — alleen vervanging van de hele referentie.

Hoe werkt @State onder de motorkap?

SwiftUI implementeert @State via het interne Storage-mechanisme. Elke @State-eigenschap krijgt een toegewijde geheugencel die wordt opgeslagen in de speciale storage-container van de weergave. Wanneer er naar wrappedValue wordt geschreven, stelt SwiftUI via didSet zijn afhankelijkheidsgraaf (dependency graph) op de hoogte van de noodzaak tot hertekenen.

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

    var body: some View {
        VStack {
            Text("Hallo, \(name)")
            Button(isLoggedIn ? "Uitloggen" : "Inloggen") {
                isLoggedIn.toggle()
            }
        }
    }
}

In het voorbeeld zijn er twee @State-eigenschappen: name (String) en isLoggedIn (Bool). Bij het aanroepen van isLoggedIn.toggle() markeert SwiftUI ContentView als update-behoevend en herstart body in de volgende rendercyclus. Belangrijk punt: @State-eigenschappen worden altijd gedeclareerd met de private modifier — dit is een signaal dat de staat uitsluitend aan de huidige weergave toebehoort en niet van buitenaf direct mag worden gewijzigd.

Voor het observeren van wijzigingen gebruikt SwiftUI CurrentValueSubject uit Combine. Elke @State-eigenschap creëert een verborgen uitgever die het systeem bij elke wijziging op de hoogte stelt. Hierdoor kan SwiftUI alleen de minimaal noodzakelijke set weergaven hertekenen, waardoor volledige update van de hiërarchie wordt vermeden.

Wanneer @State gebruiken in een project

@State is optimaal voor eenvoudige lokale staten: tekstvelden voor zoeken, booleaanse vlaggen voor modale vensters, instellingsschakelaars, tellers, geselecteerde lijstelementen. Als de waarde slechts in één weergave en de geneste componenten ervan (via @Binding) wordt gebruikt, is @State de juiste keuze. Voor staten die het sluiten van de weergave moeten overleven (bijv. formuliergegevens), is @State ook geschikt zolang de weergave in de hiërarchie blijft.

• Tekstvelden — @State voor het opslaan van ingevoerde tekst in TextField
• Booleaanse vlaggen — @State voor tonen/verbergen van modale vensters en sheets
• Elementselectie — @State voor het volgen van geselecteerd tabblad of rij
• Tellers — @State voor numerieke waarden met increment/decrement
• Tussentijdse berekeningen — @State voor het cachen van resultaten binnen de weergave

Gebruik @State niet voor globale applicatiestanden, het cachen van netwerkgegevens of objecten die op meerdere schermen worden gebruikt. Hiervoor zijn @StateObject en @EnvironmentObject bedoeld. Ook is @State niet geschikt voor het opslaan van grote hoeveelheden gegevens — elke keer dat het verandert, wordt de hele weergave hertekend.

@State en @Binding: samenwerken

@Binding is een brug tussen @State in de bovenliggende weergave en de onderliggende weergave die deze staat moet wijzigen. De ouder declareert @State en het kindcomponent krijgt de Binding via de $-projectie. Wijziging van de Binding in de onderliggende weergave werkt automatisch de @State in de ouder bij — en omgekeerd. Dit zorgt voor een eenrichtingsgegevensstroom met feedbackmogelijkheid.

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)
    }
}

In de listing heeft ParentView de @State text, en ChildView ontvangt $text als Binding. De TextField binnen ChildView bindt aan deze Binding via text: $text. Wanneer de gebruiker typt in TextField, verandert de waarde in ChildView via Binding, wat de @State in ParentView bijwerkt. Beide weergaven worden hertekend met de nieuwe waarde.

Veelgemaakte fouten bij het werken met @State

De meest voorkomende fout is het toewijzen van een klasse aan een @State-eigenschap. Als je @State var model = MyClass() schrijft, kan SwiftUI wijzigingen van eigenschappen binnen de klasse niet volgen — alleen vervanging van het object zelf. Gebruik voor klassen altijd @StateObject. Een tweede veelvoorkomend probleem is het declareren van @State zonder de private modifier, wat het principe van staatsinkapseling schendt.

Direct doorgeven van @State aan een onderliggende weergave zonder $ — nog een typische fout. Als je TextField(text: text) doorgeeft in plaats van TextField(text: $text), ontvangt het kindcomponent een gewone string, geen Binding. Wijziging van de tekst in TextField wordt niet gesynchroniseerd met de bovenliggende @State. Gebruik altijd de $-projectie om Binding door te geven.

De derde fout zijn meerdere @State-eigenschappen voor gerelateerde gegevens. Als meerdere waarden logisch één geheel vormen (bijv. formuliervelden), combineer ze dan in één structuur met één @State. Dit vereenvoudigt het doorgeven van staat aan onderliggende weergaven en vermindert het aantal afzonderlijke updatetriggers.

Voorbeelden van @State-gebruik in SwiftUI

@State wordt in de meeste SwiftUI-projecten gebruikt voor basisinteractiviteit. Laten we een voorbeeld van een aanmeldformulier bekijken, waar @State de tekstvelden en laadstatus beheert. Dit patroon komt in elke toepassing voor — van eenvoudige notities tot complexe zakelijke oplossingen.

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("Inloggen") {
                login()
            }.disabled(isLoading)
        }
    }

    private func login() {
        isLoading = true
        // Netwerkverzoek uitvoeren
    }
}

In het voorbeeld zijn er vier @State-eigenschappen: email en password voor de formuliervelden, isLoading voor laadindicatie en errorMessage voor foutmeldingen. Elke eigenschap beheert onafhankelijk zijn eigen deel van de interface. Bij wijziging van isLoading wordt de knop automatisch geblokkeerd via disabled(isLoading) — zonder handmatige UI-update.