swiftui-patterns

SwiftUI Patterns

Modern SwiftUI patterns. Baseline is iOS 17; APIs newer than that are marked inline.

View Composition

Small, Focused Views

// ✅ Good: Single responsibility
struct AvatarView: View {
    let imageURL: URL?
    let size: CGFloat

    var body: some View {
        AsyncImage(url: imageURL) { image in
            image.resizable()
        } placeholder: {
            Color.gray.opacity(0.2)
        }
        .frame(width: size, height: size)
        .clipShape(Circle())
    }
}

struct UserRow: View {
    let user: User

    var body: some View {
        HStack {
            AvatarView(imageURL: user.avatarURL, size: 48)
            VStack(alignment: .leading) {
                Text(user.name).font(.headline)
                Text(user.email).font(.caption).foregroundStyle(.secondary)
            }
        }
    }
}

AsyncImage only uses URLCache — it has no in-memory decoded-image cache and re-decodes on every reappearance, so it thrashes in scrolling lists. Use a caching loader (Nuke, Kingfisher, Coil 3 on KMP) for row/grid imagery; keep AsyncImage for one-off images.

State Management

@Observable (iOS 17+)

// @MainActor is required: Observation tracking and SwiftUI updates must happen on
// the main actor, and without it these mutations are data races under Swift 6.
// (Only redundant if the module opts into `-default-isolation MainActor`.)
@MainActor
@Observable
final class HomeViewModel {
    var items: [Item] = []
    var isLoading = false

    private let api: APIClient
    init(api: APIClient) { self.api = api }

    func loadItems() async {
        isLoading = true
        defer { isLoading = false }
        items = await api.fetchItems()
    }
}

struct HomeView: View {
    // @State owns the instance; the initial value is only used on first render.
    @State private var viewModel = HomeViewModel(api: .shared)

    var body: some View {
        List {
            if viewModel.isLoading {
                ProgressView()
            } else {
                ForEach(viewModel.items) { item in
                    Text(item.title)
                }
            }
        }
        .task {
            await viewModel.loadItems()
        }
    }
}