.task { } — wat is het, async modifier en gegevens laden in View

Wat is .task { } in SwiftUI

.task { } — is een View modifier die een Task aanmaakt in async context wanneer de View op het scherm verschijnt. SwiftUI start de doorgegeven closure op de achtergrond, terwijl de hoofdthread vrij blijft voor UI-bewerkingen. Wanneer de View verdwijnt, annuleert SwiftUI automatisch de Task via het Structured Concurrency mechanisme — dit garandeert dat de asynchrone bewerking niet doorgaat nadat het resultaat ervan niet meer nodig is.

Volgens Apple — Swift Programming Language (2025) gebruikt .task het Structured Concurrency concept, geïntroduceerd in Swift 5.5. Elke .task maakt een subtask aan binnen de taak van de bovenliggende View. Als de bovenliggende taak wordt geannuleerd (View verdwijnt), worden alle subtaken ook automatisch geannuleerd. Dit vereenvoudigt het beheer van de levenscyclus van asynchrone bewerkingen radicaal in vergelijking met het handmatig bijhouden van verwijzingen naar DispatchWorkItem of AnyCancellable.

In tegenstelling tot de traditionele aanpak met @State + handmatige aanroep in .onAppear, vereist .task niet dat je een verwijzing naar de Task bewaart voor latere annulering. SwiftUI doet dit automatisch, wat de hoeveelheid boilerplate code vermindert en het risico elimineert om te vergeten een taak te annuleren.

struct ArticlesView: View {
    @State var articles: [Article] = []
    @State var error: Error?
    
    var body: some View {
        List(articles) { article in
            Text(article.title)
        }
        .task {
            do {
                articles = await APIClient().fetchArticles()
            } catch {
                self.error = error
            }
        }
    }
}

.task vs .onAppear: belangrijkste verschillen

Veel ontwikkelaars zijn gewend om gegevens te laden in .onAppear, maar met de komst van async/await en .task is deze aanpak verouderd. .onAppear voert code synchroon uit — voor asynchrone bewerkingen binnen .onAppear moet je de aanroep in Task { } wrappen en handmatig een verwijzing ernaar bewaren voor mogelijke annulering. .task doet dit automatisch.

.onAppear is nog steeds nuttig voor synchrone bewerkingen — bijvoorbeeld loggen of initiële UI-configuratie. Maar voor asynchroon laden van gegevens, netwerkverzoeken, werken met databases of bestandssystemen, gebruik .task. Dit is veiliger en schoner vanuit architectonisch oogpunt.

// ❌ Legacy aanpak: Task in .onAppear zonder annulering
var loadTask: Task<Void, Never>?
func body() { var body: some View { Text("") }
    .onAppear {
        loadTask = Task { await loadData() }
    }
    .onDisappear { loadTask?.cancel() }

// ✅ Moderne aanpak: .task beheert annulering
func body() { var body: some View { Text("") }
    .task { await loadData() }

.task(id:) — herstart bij wijziging van gegevens

De modifier .task(id:) accepteert een extra parameter — een identifier. Wanneer de waarde van de identifier verandert, annuleert SwiftUI de huidige taak en start een nieuwe met de nieuwe identifier. Dit is ideaal voor schermen waar gegevens afhankelijk zijn van een geselecteerde parameter — bijvoorbeeld een lijst met artikelen per categorie of productdetails op ID.

struct CategoryView: View {
    let categoryId: Int
    @State var items: [Item] = []
    
    var body: some View {
        List(items) { item in
            Text(item.name)
        }
        .task(id: categoryId) {
            await loadItems(for: categoryId)
        }
    }
    
    func loadItems(for id: Int) async {
        do {
            items = await APIClient().fetchItems(categoryId: id)
        } catch {
            // fout afhandelen
        }
    }
}

Wanneer categoryId verandert, annuleert SwiftUI het vorige verzoek en start een nieuw. Dit is vooral belangrijk bij snel schakelen tussen categorieën — oude verzoeken zullen niet concurreren met nieuwe voor het bijwerken van de status. Zonder .task(id:) zou je wijzigingen handmatig moeten volgen via .onChange en de Task handmatig moeten beheren.

Taken annuleren en isCancelled controleren

Hoewel .task de taak automatisch annuleert wanneer de View verdwijnt, moet de asynchrone bewerking zelf coöperatief annulering controleren. Swift gebruikt een coöperatief annuleringsmodel — Task.cancel() stopt de uitvoering niet geforceerd, maar stelt alleen de isCancelled-vlag in. Code binnen de taak moet deze vlag periodiek controleren.

struct LoadingView: View {
    @State var progress: Double = 0
    
    var body: some View {
        ProgressView(value: progress)
            .task {
                for i in 0..<100 {
                    // Controleer annulering
                    try Task.checkCancellation()
                    
                    await Task.sleep(nanoseconds: 50_000_000)
                    progress = Double(i + 1) / 100.0
                }
            }
    }
}

Task.checkCancellation() gooit CancellationError als de taak is geannuleerd. Dit is de eenvoudigste controlemethode — het werkt in elke async context. Alternatief — handmatig controleren van Task.isCancelled voor dure bewerkingen. Voor URLSession worden netwerkverzoeken automatisch geannuleerd bij annulering van de taak, omdat URLSession Structured Concurrency vanaf het begin ondersteunt.

Praktische voorbeelden van .task

.task is geschikt voor vele scenario's: van eenvoudig JSON laden tot complexe parallelle bewerkingen met TaskGroup. Laten we drie typische gebruiksvoorbeelden bekijken.

Laden met foutafhandeling

struct ProfileView: View {
    @State var profile: Profile?
    @State var isLoading = true
    
    var body: some View {
        Group {
            if isLoading {
                ProgressView()
            } else if let profile {
                Text(profile.name)
            } else {
                Text("Laden mislukt")
            }
        }
        .task {
            defer { isLoading = false }
            do {
                profile = await APIClient().fetchProfile()
            } catch {
                // profiel blijft nil
            }
        }
    }
}

Parallel laden met TaskGroup

struct DashboardView: View {
    @State var stats: DashboardStats?
    
    var body: some View {
        Text("Dashboard")
            .task {
                stats = await Task {
                    await withThrowingTaskGroup { group in
                        group.addTask { await API().fetchUsers() }
                        group.addTask { await API().fetchOrders() }
                        group.addTask { await API().fetchRevenue() }
                        
                        return DashboardStats(
                            users: try await group.next(),
                            orders: try await group.next(),
                            revenue: try await group.next()
                        )
                    }
                }.value
            }
    }
}

Veelvoorkomende fouten met .task

De meest voorkomende fout — het muteren van UI-eigenschappen binnen .task zonder naar de hoofdthread te schakelen. Hoewel SwiftUI automatisch updates naar de hoofdthread terugstuurt bij wijziging van @State in async context, kunnen directe manipulaties van UIKit-elementen binnen .task een crash veroorzaken.

• try/catch vergeten — .task handelt fouten niet automatisch af. Alle functies die fouten gooien, moeten binnen do/catch worden gewrapped, anders crasht de applicatie.
• Race condition — als meerdere .task(id:) met verschillende id's worden gestart en dezelfde status bijwerken, zijn racecondities mogelijk. Gebruik aparte eigenschappen voor verschillende gegevensbronnen.
• Lange synchrone bewerkingen — .task maakt synchrone code niet asynchroon. Als er binnen .task zwaar synchroon werk is, wrap het dan in Task.detached of verplaats het naar een aparte async-methode.
• Negeren van CancellationError — bij controle van Task.checkCancellation() moet de CancellationError fout worden doorgegeven, niet worden onderdrukt. Het onderdrukken van annulering kan leiden tot geheugenlekken.

// ❌ Fout: geen foutafhandeling
.task {
    let data = await fetchData() // crasht bij fout!
    items = data
}

// ✅ Correct: do/catch
.task {
    do {
        items = await fetchData()
    } catch {
        errorMessage = error.localizedDescription
    }
}