LazyVStack: What Are Vertical and Horizontal Stacks in SwiftUI

What Are LazyVStack and LazyHStack?

LazyVStack and LazyHStack are layout containers in SwiftUI that create and display child views only as needed, when they become visible in the scrollable area. LazyVStack arranges elements vertically (top to bottom), while LazyHStack arranges them horizontally (left to right).

Both stacks were introduced by Apple in SwiftUI 2.0 (iOS 14, macOS 11, watchOS 7, tvOS 14) alongside LazyVGrid and LazyHGrid. Before lazy stacks appeared, developers had to use UITableView and UICollectionView through UIViewRepresentable for efficient work with large lists. LazyVStack eliminated this need by providing a native SwiftUI interface with automatic lazy loading.

According to Apple WWDC Session 10031 (2020), lazy stacks use a deferred view creation mechanism: SwiftUI stores the source data (e.g., an array of models) and creates view instances right before rendering on screen. When scrolling, stacks reuse already created views, avoiding new allocations — this reduces the load on the memory allocator and Swift's garbage collector.

To work with lazy stacks, always place them inside a ScrollView — without scrolling, elements extending beyond the screen boundaries will simply be clipped, not lazily created.

How Lazy Loading Works

The lazy loading mechanism in LazyVStack is based on geometry: SwiftUI tracks the position of each child view relative to the ScrollView container. When an element crosses the visible area boundary (with a small buffer of a few points), the system calls its initializer and renders the content. When an element leaves the screen, SwiftUI destroys the view but preserves state through @State if it is marked as preservable.

This approach differs from VStack, where all child views are created immediately upon container initialization, regardless of their visibility. For a list of 10,000 elements, VStack will create 10,000 view instances in memory, while LazyVStack will create only those that fit on the screen (usually 8–15).

Sizes and Alignment

LazyVStack accepts three configuration parameters: alignment (HorizontalAlignment — leading, center, trailing), spacing (CGFloat — spacing between elements), and pinnedViews (PinnedScrollableViews — pinning section headers). LazyHStack uses the same parameters, but alignment accepts VerticalAlignment (top, center, bottom).

Differences Between LazyVStack and VStack: Performance and Memory

The main difference between LazyVStack and VStack is the strategy for creating child elements. VStack (eager stack) calculates the size and position of all child views at render time, making it unsuitable for large dynamic lists. LazyVStack (lazy stack) defers creation until the element becomes visible.

Let's compare behavior using a list of 1000 text lines. VStack will load all 1000 lines into memory at once, calling each line's initializer and allocating memory for it. This leads to performance degradation on weak devices (iPhone SE, iPad mini) and increased screen startup time. LazyVStack will load only the visible 10–12 lines, creating the rest as you scroll.

A practical test (using Xcode Instruments, Allocations profile) shows: on an iPhone 12 mini, a list of 5000 elements with LazyVStack consumes 3–5 MB of memory, while VStack with the same content consumes 150–250 MB — 50 times more. Meanwhile, the initial render time for LazyVStack is ~50 ms versus ~800 ms for VStack on the same device.

Choose VStack for static or short lists (up to 10–15 elements), and LazyVStack for any dynamic or potentially long lists. Apple recommends using LazyVStack by default if you are not sure about the maximum list size.

When VStack Is Still Needed

VStack remains the best choice for static interfaces: profile screen, login form, product card — where the number of elements is known and does not exceed 10–15. VStack works faster on initial render for such quantities because it does not waste resources on geometry tracking and lazy loading. Additionally, VStack works correctly outside ScrollView (e.g., inside ZStack or Group), whereas LazyVStack without ScrollView loses its purpose.

When to Use LazyVStack and LazyHStack

Lazy stacks are optimal for scenarios with large or unpredictable numbers of elements: social media feeds, product catalogs, chat lists, media file libraries, event logs, admin panels with thousands of records.

Specific use cases: message list in a messenger (tens of thousands of messages), image carousel in a gallery app, news feed with infinite loading, order list in an online store. LazyHStack is especially useful for horizontal carousels — for example, Instagram Stories or promotional banners.

Contraindications: interfaces with element appearance animations (lazy stacks do not support transitions between element deletion states without additional logic), cases where all elements should be visible simultaneously (a short list of checkboxes), and when you need precise control over cell reuse (in which case List or Table may be preferable).

Code Examples: List, Grid, and Sections

Example 1: Simple Vertical List with LazyVStack

A basic example displays 1000 elements with minimal memory consumption. Key elements: ScrollView as the scroll container, LazyVStack for lazy loading, ForEach with an identifier for data iteration.

import SwiftUI

struct LazyListExample: View {
    let items = Array(0..<1000)

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 8) {
                ForEach(items, id: \.self) { index in
                    Text("Item #\(index)")
                        .font(.body)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding()
                        .background(Color.gray.opacity(0.1))
                        .cornerRadius(8)
                }
            }
            .padding()
        }
    }
}

The code creates a ScrollView containing a LazyVStack with 8pt spacing between elements. ForEach iterates over the items array and creates a Text for each index. Thanks to lazy loading, of 1000 elements only the visible 10–12 are in memory at once.

Example 2: Sections with pinnedViews

This example demonstrates grouping elements by sections with pinned headers, similar to iOS contacts. Section defines the header and content, pinnedViews: .sectionHeaders fixes the header at the top of the screen when scrolling.

import SwiftUI

struct SectionedList: View {
    let cities = ["Moscow", "London", "Tokyo", "New York", "Paris"]
    let countries = ["Russia", "UK", "Japan", "USA", "France"]

    var body: some View {
        ScrollView {
            LazyVStack(pinnedViews: .sectionHeaders) {
                Section(header: Text("Cities").font(.title).bold()) {
                    ForEach(cities, id: \.self) { city in
                        Text(city).padding(8)
                    }
                }
                Section(header: Text("Countries").font(.title).bold()) {
                    ForEach(countries, id: \.self) { country in
                        Text(country).padding(8)
                    }
                }
            }
        }
    }
}

Pinned headers (.sectionHeaders) behave like UITableView section headers: when scrolling a section, the header "sticks" to the top edge of the screen until the entire section disappears, after which it is replaced by the next section's header. pinnedViews can be combined: .sectionHeaders and .sectionFooters simultaneously.

Example 3: Horizontal Carousel with LazyHStack

LazyHStack is used for horizontal scrolling — image carousels, horizontal category lists. The alignment: .top parameter aligns elements to the top edge.

import SwiftUI

struct HorizontalCarousel: View {
    let colors: [Color] = [.red, .blue, .green, .orange, .purple, .pink]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 16, alignment: .top) {
                ForEach(0..<100, id: \.self) { index in
                    RoundedRectangle(cornerRadius: 12)
                        .fill(colors[index % colors.count])
                        .frame(width: 150, height: 200)
                        .overlay(Text("\(index + 1)").foregroundColor(.white).bold())
                }
            }
            .padding(.horizontal)
        }
        .frame(height: 220)
    }
}

The code creates a horizontal ScrollView with LazyHStack. Of 100 rectangles, only 2–3 are displayed simultaneously (depending on screen width and element size). When scrolling left, new elements are loaded lazily. The container height is fixed (220pt) to avoid infinite height in horizontal scrolling.

PinnedViews and Sections in Lazy Stacks

PinnedScrollableViews is a configuration option for LazyVStack and LazyHStack that controls pinning section headers and footers when scrolling. Two values are supported: sectionHeaders (headers stick to the beginning of the container) and sectionFooters (footers stick to the end).

The pinned views mechanism works only inside a Section container nested in LazyVStack. Each Section has a header and/or footer that automatically get the sticky behavior. SwiftUI tracks the position of each section relative to the ScrollView boundaries and switches the pinned element's visibility when transitioning between sections.

Important: pinnedViews increase layout computation complexity because SwiftUI must constantly recalculate which header is currently pinned. Use pinnedViews only when the functionality is actually needed — for simple lists without sections, it is better to omit this parameter. Apple in its documentation (Human Interface Guidelines, 2024) recommends using pinned headers for alphabetical indexes and date-based grouping.

Tips for Optimizing Lazy Stacks

Proper use of identifiers is the most important performance factor for LazyVStack. Each element in ForEach must have a stable unique id. Using \.self with primitives (Int, String) is acceptable, but for data models always implement the Identifiable protocol. Unstable ids (e.g., UUID generated each time) cause SwiftUI to recreate all views on every update.

Avoid heavy computations inside each stack element's body. If an element contains complex layout or data processing — extract the logic into a separate view structure with its own lazy loading. Use EquatableView to prevent unnecessary redraws when the element's data has not changed.

For images inside LazyVStack, always use asynchronous loading (AsyncImage) or caching via Kingfisher/Nuke. Each element should not synchronously load an image when appearing on screen — this will cause scroll jank. According to WWDC Session 10031, the optimal prefetch buffer size is 3–5 screens ahead and behind the current position.

Measure performance using Xcode Instruments with the SwiftUI profile. Pay attention to metrics: body evaluations, allocations, and frame rate (FPS). Target values: FPS > 55 when scrolling, render time per element < 1 ms.