swiftui-patterns

SwiftUI Patterns

Modern SwiftUI patterns for building declarative, performant user interfaces on Apple platforms. Covers the Observation framework, view composition, type-safe navigation, and performance optimization.

When to Activate

• Building SwiftUI views and managing state (@State, @Observable, @Binding)
• Designing navigation flows with NavigationStack
• Structuring view models and data flow
• Optimizing rendering performance for lists and complex layouts
• Working with environment values and dependency injection in SwiftUI

State Management

Property Wrapper Selection

Choose the simplest wrapper that fits:

Wrapper	Use Case
@State	View-local value types (toggles, form fields, sheet presentation)
@Binding	Two-way reference to parent's @State
@Observable class + @State	Owned model with multiple properties
@Observable class (no wrapper)	Read-only reference passed from parent
@Bindable	Two-way binding to an @Observable property
@Environment	Shared dependencies injected via .environment()

@Observable ViewModel

Use @Observable (not ObservableObject) — it tracks property-level changes so SwiftUI only re-renders views that read the changed property:

@Observable
final class ItemListViewModel {
    private(set) var items: [Item] = []
    private(set) var isLoading = false
    var searchText = ""

    private let repository: any ItemRepository

    init(repository: any ItemRepository = DefaultItemRepository()) {
        self.repository = repository
    }

    func load() async {
        isLoading = true
        defer { isLoading = false }
        items = (try? await repository.fetchAll()) ?? []
    }
}

View Consuming the ViewModel

struct ItemListView: View {
    @State private var viewModel: ItemListViewModel

    init(viewModel: ItemListViewModel = ItemListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }

    var body: some View {
        List(viewModel.items) { item in
            ItemRow(item: item)
        }
        .searchable(text: $viewModel.searchText)
        .overlay { if viewModel.isLoading { ProgressView() } }
        .task { await viewModel.load() }
    }
}