LazyVStack and LazyHStack in iOS Swift - UI Render Trace

Component - LazyVStack and LazyHStack

LazyVStack and LazyHStack are SwiftUI containers that arrange child views vertically and horizontally, respectively. They load their child views only when needed, which helps improve performance when displaying many items.

Widget Tree

LazyVStack
├─ Text("Item 1")
├─ Text("Item 2")
├─ Text("Item 3")
LazyHStack
├─ Text("Item A")
├─ Text("Item B")
├─ Text("Item C")

The LazyVStack arranges Text views vertically in a column. The LazyHStack arranges Text views horizontally in a row. Both stacks load their children lazily, meaning views appear only when scrolled into view.

Render Trace - 3 Steps

Step 1: LazyVStack

Step 2: LazyHStack

Step 3: ScrollView

State Change - Re-render

Trigger:User scrolls down the LazyVStack or sideways the LazyHStack

Before

Only visible child views are loaded and rendered

→

After

New child views that come into view are loaded and rendered lazily

Re-renders:Only the newly visible child views inside LazyVStack or LazyHStack re-render

UI Quiz - 3 Questions

What is the main benefit of using LazyVStack over VStack when showing many items?

A It loads child views only when needed, improving performance

B It arranges items horizontally instead of vertically

C It disables scrolling automatically

D It changes the font size of child views

Key Insight

Using LazyVStack and LazyHStack helps your app stay fast and smooth by creating views only when they are visible. This is like only unpacking items from a box when you need them, saving memory and CPU work.