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:

@Observable ViewModel

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

swift
1@Observable
2final class ItemListViewModel {
3    private(set) var items: [Item] = []
4    private(set) var isLoading = false
5    var searchText = ""
6
7    private let repository: any ItemRepository
8
9    init(repository: any ItemRepository = DefaultItemRepository()) {
10        self.repository = repository
11    }
12
13    func load() async {
14        isLoading = true
15        defer { isLoading = false }
16        items = (try? await repository.fetchAll()) ?? []
17    }
18}

View Consuming the ViewModel

swift
1struct ItemListView: View {
2    @State private var viewModel: ItemListViewModel
3
4    init(viewModel: ItemListViewModel = ItemListViewModel()) {
5        _viewModel = State(initialValue: viewModel)
6    }
7
8    var body: some View {
9        List(viewModel.items) { item in
10            ItemRow(item: item)
11        }
12        .searchable(text: $viewModel.searchText)
13        .overlay { if viewModel.isLoading { ProgressView() } }
14        .task { await viewModel.load() }
15    }
16}

Environment Injection

Replace @EnvironmentObject with @Environment:

swift
1// Inject
2ContentView()
3    .environment(authManager)
4
5// Consume
6struct ProfileView: View {
7    @Environment(AuthManager.self) private var auth
8
9    var body: some View {
10        Text(auth.currentUser?.name ?? "Guest")
11    }
12}

View Composition

Extract Subviews to Limit Invalidation

Break views into small, focused structs. When state changes, only the subview reading that state re-renders:

swift
1struct OrderView: View {
2    @State private var viewModel = OrderViewModel()
3
4    var body: some View {
5        VStack {
6            OrderHeader(title: viewModel.title)
7            OrderItemList(items: viewModel.items)
8            OrderTotal(total: viewModel.total)
9        }
10    }
11}

ViewModifier for Reusable Styling

swift
1struct CardModifier: ViewModifier {
2    func body(content: Content) -> some View {
3        content
4            .padding()
5            .background(.regularMaterial)
6            .clipShape(RoundedRectangle(cornerRadius: 12))
7    }
8}
9
10extension View {
11    func cardStyle() -> some View {
12        modifier(CardModifier())
13    }
14}

Navigation

Type-Safe NavigationStack

Use NavigationStack with NavigationPath for programmatic, type-safe routing:

swift
1@Observable
2final class Router {
3    var path = NavigationPath()
4
5    func navigate(to destination: Destination) {
6        path.append(destination)
7    }
8
9    func popToRoot() {
10        path = NavigationPath()
11    }
12}
13
14enum Destination: Hashable {
15    case detail(Item.ID)
16    case settings
17    case profile(User.ID)
18}
19
20struct RootView: View {
21    @State private var router = Router()
22
23    var body: some View {
24        NavigationStack(path: $router.path) {
25            HomeView()
26                .navigationDestination(for: Destination.self) { dest in
27                    switch dest {
28                    case .detail(let id): ItemDetailView(itemID: id)
29                    case .settings: SettingsView()
30                    case .profile(let id): ProfileView(userID: id)
31                    }
32                }
33        }
34        .environment(router)
35    }
36}

Performance

Use Lazy Containers for Large Collections

LazyVStack and LazyHStack create views only when visible:

swift
1ScrollView {
2    LazyVStack(spacing: 8) {
3        ForEach(items) { item in
4            ItemRow(item: item)
5        }
6    }
7}

Stable Identifiers

Always use stable, unique IDs in ForEach — avoid using array indices:

swift
1// Use Identifiable conformance or explicit id
2ForEach(items, id: \.stableID) { item in
3    ItemRow(item: item)
4}

Avoid Expensive Work in body

• Never perform I/O, network calls, or heavy computation inside body
• Use .task {} for async work — it cancels automatically when the view disappears
• Use .sensoryFeedback() and .geometryGroup() sparingly in scroll views
• Minimize .shadow(), .blur(), and .mask() in lists — they trigger offscreen rendering

Equatable Conformance

For views with expensive bodies, conform to Equatable to skip unnecessary re-renders:

swift
1struct ExpensiveChartView: View, Equatable {
2    let dataPoints: [DataPoint] // DataPoint must conform to Equatable
3
4    static func == (lhs: Self, rhs: Self) -> Bool {
5        lhs.dataPoints == rhs.dataPoints
6    }
7
8    var body: some View {
9        // Complex chart rendering
10    }
11}

Previews

Use #Preview macro with inline mock data for fast iteration:

swift
1#Preview("Empty state") {
2    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
3}
4
5#Preview("Loaded") {
6    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
7}

Anti-Patterns to Avoid

• Using ObservableObject / @Published / @StateObject / @EnvironmentObject in new code — migrate to @Observable
• Putting async work directly in body or init — use .task {} or explicit load methods
• Creating view models as @State inside child views that don't own the data — pass from parent instead
• Using AnyView type erasure — prefer @ViewBuilder or Group for conditional views
• Ignoring Sendable requirements when passing data to/from actors

References

See skill: swift-actor-persistence for actor-based persistence patterns. See skill: swift-protocol-di-testing for protocol-based DI and testing with Swift Testing.