Selecting between LazyVStack, Record, and VStack in SwiftUI – Donny Wals

SwiftUI affords a number of approaches to constructing lists of content material. You need to use a VStack in case your listing consists of a bunch of components that must be positioned on high of one another. Or you should utilize a LazyVStack in case your listing is actually lengthy. And in different circumstances, a Record would possibly make extra sense.

On this put up, I’d like to check out every of those elements, define their strengths and weaknesses and hopefully give you some insights about how one can determine between these three elements that each one place content material on high of one another.

We’ll begin off with a take a look at VStack. Then we’ll transfer on to LazyVStack and we’ll wrap issues up with Record.

Understanding when to make use of VStack

By far the best stack element that we now have in SwiftUI is the VStack. It merely locations components on high of one another:

VStack {
  Textual content("One")
  Textual content("Two")
  Textual content("Three")
}

A VStack works rather well once you solely have a handful of things, and also you need to place this stuff on high of one another. Despite the fact that you’ll sometimes use a VStack for a small variety of gadgets, however there’s no cause you couldn’t do one thing like this:

ScrollView {
  VStack {
    ForEach(fashions) { mannequin in 
      HStack {
        Textual content(mannequin.title)
        Picture(systemName: mannequin.iconName)
      }
    }
  }
}

When there’s only some gadgets in fashions, it will work fantastic. Whether or not or not it’s the proper selection… I’d say it’s not.

In case your fashions listing grows to possibly 1000 gadgets, you’ll be placing an equal variety of views in your VStack. It’s going to require a number of work from SwiftUI to attract all of those components.

Finally that is going to result in efficiency points as a result of each single merchandise in your fashions is added to the view hierarchy as a view.

Now as an example these views additionally include photographs that have to be loaded from the community. SwiftUI is then going to load these photographs and render them too:

ScrollView {
  VStack {
    ForEach(fashions) { mannequin in 
      HStack {
        Textual content(mannequin.title)
        RemoteImage(url: mannequin.imageURL)
      }
    }
  }
}

The RemoteImage on this case can be a customized view that allows loading photographs from the community.

When every little thing is positioned in a VStack like I did on this pattern, your scrolling efficiency shall be horrendous.

A VStack is nice for constructing a vertically stacked view hierarchy. However as soon as your hierarchy begins to feel and appear extra like a scrollable listing… LazyVStack is perhaps the higher selection for you.

Understanding when to make use of a LazyVStack

The LazyVStack elements is functionally principally the identical as an everyday VStack. The important thing distinction is {that a} LazyVStack doesn’t add each view to the view hierarchy instantly.

As your consumer scrolls down a protracted listing of things, the LazyVStack will add an increasing number of views to the hierarchy. Which means you’re not paying an enormous price up entrance, and within the case of our RemoteImage instance from earlier, you’re not loading photographs that the consumer would possibly by no means see.

Swapping a VStack out for a LazyVStack is fairly simple:

ScrollView {
  LazyVStack {
    ForEach(fashions) { mannequin in 
      HStack {
        Textual content(mannequin.title)
        RemoteImage(url: mannequin.imageURL)
      }
    }
  }
}

Our drawing efficiency must be significantly better with the LazyVStack in comparison with the common VStack method.

In a LazyVStack, we’re free to make use of any sort of view that we wish, and we now have full management over how the listing finally ends up trying. We don’t achieve any out of the field performance which might be nice when you require the next degree of customization of your listing.

Subsequent, let’s see how Record is used to know how this compares to LazyVStack.

Understanding when to make use of Record

The place a LazyVStack supplies us most management, a Record supplies us with helpful options proper of the field. Relying on the place your listing is used (for instance a sidebar or simply as a full display), Record will look and behave barely in another way.

Whenever you use views like NavigationLink inside an inventory, you achieve some small design tweaks to make it clear that this listing merchandise navigates to a different view.

That is very helpful for many circumstances, however you won’t want any of this performance.

Record additionally comes with some built-in designs that let you simply create one thing that both seems to be just like the Settings app, or one thing a bit extra like an inventory of contacts. It’s simple to get began with Record when you don’t require a lot of customization.

Identical to LazyVStack, a Record will lazily consider its contents which suggests it’s a very good match for bigger units of knowledge.

An excellent fundamental instance of utilizing Record within the instance that we noticed earlier would appear to be this:

Record(fashions) { mannequin in 
  HStack {
    Textual content(mannequin.title)
    RemoteImage(url: mannequin.imageURL)
  }
}

We don’t have to make use of a ForEach however we might if we wished to. This may be helpful once you’re utilizing Sections in your listing for instance:

Record {
  Part("Common") {
    ForEach(mannequin.normal) { merchandise in 
      GeneralItem(merchandise)
    }
  }

  Part("Notifications") {
    ForEach(mannequin.notifications) { merchandise in 
      NotificationItem(merchandise)
    }
  }
}

Whenever you’re utilizing Record to construct one thing like a settings web page, it’s even allowed to skip utilizing a ForEach altogether and hardcode your youngster views:

Record {
  Part("Common") {
    GeneralItem(mannequin.colorScheme)
    GeneralItem(mannequin.showUI)
  }

  Part("Notifications") {
    NotificationItem(mannequin.publication)
    NotificationItem(mannequin.socials)
    NotificationItem(mannequin.iaps)
  }
}

The choice between a Record and a LazyVStack for me normally comes down as to if or not I would like or need Record performance. If I discover that I would like little to none of Record‘s options odds are that I’m going to achieve for LazyVStack in a ScrollView as a substitute.

In Abstract

On this put up, you discovered about VStack, LazyVStack and Record. I defined a number of the key issues and efficiency traits for these elements, with out digging to deeply into fixing each use case and risk. Particularly with Record there’s rather a lot you are able to do. The important thing level is that Record is a element that doesn’t all the time match what you want from it. In these circumstances, it’s helpful that we now have a LazyVStack.

You discovered that each Record and LazyVStack are optimized for displaying massive quantities of views, and that LazyVStack comes with the largest quantity of flexibility when you’re prepared to implement what you want your self.

You additionally discovered that VStack is actually solely helpful for smaller quantities of views. I like utilizing it for structure functions however as soon as I begin placing collectively an inventory of views I want a lazier method. Particularly when i’m coping with an unknown variety of gadgets.