LazyVStack & LazyHStack
Render large content lazily for performance.
LazyVStack & LazyHStack is a free SwiftUI Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Eager Problem
A regular VStack builds every child at once. With hundreds of rows, that eager work can stutter and waste memory.
Meet LazyVStack
A LazyVStack only creates rows as they scroll into view, keeping huge lists fast and light. ⚡
LazyVStack {
ForEach(items) { item in
Row(item)
}
}Lazy Needs Scrolling
Always place a LazyVStack inside a ScrollView, since lazy loading only pays off when content scrolls offscreen.
ScrollView {
LazyVStack {
ForEach(items) { Row($0) }
}
}The Horizontal Twin
A LazyHStack does the same trick sideways, perfect for long, swipeable rows of cards or thumbnails.
ScrollView(.horizontal) {
LazyHStack {
ForEach(photos) { Thumb($0) }
}
}Same Spacing API
Lazy stacks accept the same spacing and alignment options as their eager cousins, so your layout code barely changes.
LazyVStack(alignment: .leading, spacing: 12) {
ForEach(items) { Row($0) }
}Cells Get Reused
As rows leave the screen, a LazyVStack can discard them, so memory stays steady even with thousands of items.
Lazy vs List
A List is lazy too, but a LazyVStack gives you styling freedom with no built-in separators or insets.
Pinned Headers
Lazy stacks support pinnedViews, letting section headers stick to the top as you scroll, like a contacts app.
LazyVStack(pinnedViews: [.sectionHeaders]) {
Section(header: Header()) {
Rows()
}
}When to Stay Eager
For a handful of items a plain VStack is simpler. Reach for lazy only when the list grows long.
Watch the Scroll
You will not see new LazyVStack rows being built, but Instruments shows they appear just in time as you scroll.
Scale with Confidence
With lazy stacks you can show endless feeds, galleries, and timelines without ever worrying about performance. ✨
Quick Check
Think about why lazy stacks exist.
Recap
You met LazyVStack and LazyHStack: stacks that create children on demand inside a ScrollView for smooth, large layouts. 🎉
Frequently asked questions
Is the “LazyVStack & LazyHStack” lesson free?
Yes — the full text of “LazyVStack & LazyHStack” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “LazyVStack & LazyHStack”?
Render large content lazily for performance. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “LazyVStack & LazyHStack” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Horizontal & Vertical ScrollView
- LazyVStack & LazyHStack
- Adaptive Grids with LazyVGrid
- ScrollView Reader & Anchors