Loading LazyStacks And Stacks

The Lazy thing in programming is interesting because it doesn’t make an action until it’s needed.

There are two lazy stacks, LazyVStack and LazyHStack, there isn’t something like LazyZStack.

In Stack example, it doesn’t load all views when they appear but it loads them when they are needed.

VStack creates all views even if they aren’t visible.
LazyVStack creates the only view that is visible and a few more to make scrolling more smooth.

For example, there are two stacks side by side, colors are added to the better differentiate between them. The key thing is only how each Text view will execute onAppear.

let data = (1…100)

#var body: some View {
    
GeometryReader { geo in
    
    HStack {
    
        ScrollView {
    
            VStack {
    
                ForEach(data, id:\.self) { number in
    
                    Text(“VStack: \(number))
    
                        .onAppear(perform: {
    
                            print(“Load VStack: \(number))
    
                        })
    
                    }
    
                }
    
                .frame(width: geo.size.width / 2)
    
        }
    
        .background(Color.yellow)

    
        ScrollView {
    
            LazyVStack {
    
                ForEach(data, id:\.self) { number in
    
                    Text(“LazyVStack: \(number))
    
                        .onAppear(perform: {
    
                            print(“Load LazyVStack: \(number))
    
                        })
    
                }
    
            }
    
            .frame(width: geo.size.width / 2)
    
        }
    
        .background(Color.blue)
    
    }
    }
}

Result: