When to use LazyVStack and LazyHStack

Creating every child in a long scrolling layout can spend work on content that is not yet needed. Lazy stacks defer that work and also have different sizing behavior from regular stacks.

Lazy stacks

A regular stack creates its child views eagerly. LazyVStack and LazyHStack create children as needed for the layout, rather than constructing them all up front. This is about view creation, not automatic loading of application data.

ScrollView {
	LazyVStack(alignment: .leading) {
		ForEach(0..<100) { index in
			Text("LazyStack \(index)")
		}
	}
	.background(.blue)
}

A lazy stack can occupy the available space along its cross axis, so its layout may differ from a regular stack containing the same views.