SwiftUI Layout Patterns: Architecture, Performance, and Production-Ready Implementation

    return CGSize(width: width, height: height)
}

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
    var point = bounds.origin
    var currentRowHeight: CGFloat = 0
    var itemsInRow = 0
    
    for subview in subviews {
        let size = subview.sizeThatFits(.unspecified)
        let itemWidth = size.width + (itemsInRow > 0 ? spacing : 0)
        
        if point.x + itemWidth > bounds.maxX || itemsInRow >= maxColumns {
            point.x = bounds.minX
            point.y += currentRowHeight + spacing
            currentRowHeight = 0
            itemsInRow = 0
        }
        
        subview.place(at: point, proposal: .init(size))
        point.x += itemWidth
        currentRowHeight = max(currentRowHeight, size.height)
        itemsInRow += 1
    }
}

}

### Step 3: Use `PreferenceKey` for Cross-Hierarchy Communication
When layout depends on data from sibling or descendant views (e.g., dynamic header height based on content), `PreferenceKey` propagates values up the tree without breaking layout passes.

```swift
struct HeaderHeightPreference: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

// Usage in child view:
Text("Dynamic Title")
    .background(GeometryReader { geo in
        Color.clear.preference(key: HeaderHeightPreference.self, value: geo.size.height)
    })

// Usage in parent view:
VStack {
    HeaderContent()
    BodyContent()
}
.onPreferenceChange(HeaderHeightPreference.self) { height in
    // Apply height to layout constraints or state
}

Architecture Decision: Prefer PreferenceKey over @State propagation for layout metadata. It decouples data flow from view identity, preventing unnecessary body re-evaluations.

Step 4: Implement Deferred Rendering for Heavy Subviews

Views with complex layout (charts, maps, image grids) should defer computation until visible. Use Task or @MainActor isolation to break synchronous layout chains.

struct DeferredLayoutView<Content: View>: View {
    let content: () -> Content
    @State private var isReady = false
    
    var body: some View {
        Group {
            if isReady {
                content()
            } else {
                ProgressView()
                    .onAppear {
                        Task { @MainActor in
                            // Allow layout pass to complete first
                            try? await Task.sleep(for: .milliseconds(16))
                            isReady = true
                        }
                    }
            }
        }
    }
}

Architecture Decision: Defer only when layout cost exceeds 2ms per frame. Use Instruments' SwiftUI timeline to validate necessity. Over-deferring introduces perceived latency.

Pitfall Guide

1. GeometryReader as a Crutch
   Using GeometryReader to "measure" a view forces synchronous layout resolution. Replace with Layout protocol or PreferenceKey propagation.

2. Ignoring Layout Pass Multiplication
   Each VStack/HStack introduces a pass boundary. Nesting 5+ levels routinely exceeds 12 passes/frame. Flatten hierarchies or use custom Layout.

3. Mutating @State During body Evaluation
   State changes during body trigger immediate layout recalculations. Hoist mutations to onAppear, onChange, or view models.

4. Missing id() in Dynamic Collections
   ForEach without stable identifiers forces full tree reconstruction on updates. Use deterministic IDs to enable layout cache reuse.

5. Overriding layoutPriority Blindly
   layoutPriority alters proposal order but doesn't reduce pass count. Misuse causes layout thrashing in constrained containers.

6. Ignoring Dynamic Type & Accessibility Sizes
   Hardcoded .frame or .padding breaks dynamic type. Use @Environment(\.dynamicTypeSize) and relative spacing (spacing: .medium).

7. Confusing safeAreaInset with padding
padding affects layout proposals; safeAreaInset reserves space post-layout. Mixing them causes overlap on devices with dynamic islands or home indicators.

Production Bundle

Action Checklist

• Profile current screens using Instruments SwiftUI template; log layout pass counts
• Replace all GeometryReader usage with Layout protocol or PreferenceKey
• Flatten nested VStack/HStack beyond 3 levels; extract into custom Layout
• Add stable id() to all ForEach and LazyVGrid/LazyHGrid collections
• Audit @State mutations during body; move to lifecycle modifiers or view models
• Test with Dynamic Type XL–XXL; verify no clipping or overflow
• Implement deferred rendering for views exceeding 2ms layout cost
• Document layout contracts: proposal constraints, pass boundaries, state dependencies

Decision Matrix

Configuration Template

// Production-ready AdaptiveFlowLayout with caching support
import SwiftUI

struct CachedFlowLayout: Layout {
    var spacing: CGFloat = 10
    var maxColumns: Int = 3
    
    struct Cache {
        var sizes: [CGSize] = []
        var valid = false
    }
    
    func makeCache(subviews: Subviews) -> Cache {
        Cache(sizes: subviews.map { $0.sizeThatFits(.unspecified) }, valid: true)
    }
    
    func updateCache(_ cache: inout Cache, subviews: Subviews) {
        cache.sizes = subviews.map { $0.sizeThatFits(.unspecified) }
        cache.valid = true
    }
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) -> CGSize {
        guard cache.valid else { return .zero }
        let maxWidth = proposal.width ?? .infinity
        var width: CGFloat = 0
        var height: CGFloat = 0
        var currentRowWidth: CGFloat = 0
        var currentRowHeight: CGFloat = 0
        var itemsInRow = 0
        
        for size in cache.sizes {
            let itemWidth = size.width + (itemsInRow > 0 ? spacing : 0)
            if currentRowWidth + itemWidth > maxWidth || itemsInRow >= maxColumns {
                width = max(width, currentRowWidth)
                height += currentRowHeight + spacing
                currentRowWidth = 0
                currentRowHeight = 0
                itemsInRow = 0
            }
            currentRowWidth += itemWidth
            currentRowHeight = max(currentRowHeight, size.height)
            itemsInRow += 1
        }
        width = max(width, currentRowWidth)
        height += currentRowHeight
        return CGSize(width: width, height: height)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Cache) {
        guard cache.valid else { return }
        var point = bounds.origin
        var currentRowHeight: CGFloat = 0
        var itemsInRow = 0
        
        for (index, size) in cache.sizes.enumerated() {
            let itemWidth = size.width + (itemsInRow > 0 ? spacing : 0)
            if point.x + itemWidth > bounds.maxX || itemsInRow >= maxColumns {
                point.x = bounds.minX
                point.y += currentRowHeight + spacing
                currentRowHeight = 0
                itemsInRow = 0
            }
            subviews[index].place(at: point, proposal: .init(size))
            point.x += itemWidth
            currentRowHeight = max(currentRowHeight, size.height)
            itemsInRow += 1
        }
    }
}

Quick Start Guide

1. Audit Layout Passes: Run Instruments with the SwiftUI template. Record baseline passes/frame for target screens.
2. Extract Custom Layout: Replace nested stacks or GeometryReader blocks with the CachedFlowLayout template. Adjust maxColumns and spacing per screen.
3. Propagate Metadata: If layout depends on child dimensions, implement a PreferenceKey to bubble values upward without breaking proposal flow.
4. Validate Performance: Re-run Instruments. Target ≤5 layout passes/frame and ≤15% CPU overhead. Iterate by flattening hierarchies or deferring heavy subviews.
5. Lock Contracts: Document proposal constraints, pass boundaries, and state dependencies in your team's architecture guide. Enforce via PR checklist.

SwiftUI layout is not a styling concern; it's a performance architecture discipline. By treating layout as a deterministic pipeline, replacing implicit measurement with explicit contracts, and leveraging iOS 16's Layout protocol, teams eliminate jank, reduce resource consumption, and ship predictable UIs. The patterns above are production-validated, pass-aware, and designed for long-term maintainability. Implement them systematically, profile relentlessly, and let data dictate layout decisions.