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

SwiftUI presents a number of approaches to constructing lists of content material. You should utilize a VStack in case your listing consists of a bunch of parts that needs to be positioned on prime of one another. Or you should use a LazyVStack in case your listing is actually lengthy. And in different circumstances, a Record may make extra sense.

On this submit, 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 resolve between these three elements that every one place content material on prime of one another.

We’ll begin off with a have 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 only stack part that we’ve got in SwiftUI is the VStack. It merely locations parts on prime of one another:

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

A VStack works very well if you solely have a handful of things, and also you wish to place this stuff on prime of one another. Regardless that you’ll usually use a VStack for a small variety of objects, however there’s no motive 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 just a few objects in fashions, this may work positive. Whether or not or not it’s the right alternative… I’d say it’s not.

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

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 for example these views additionally include photographs that should 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 could be a customized view that permits loading photographs from the community.

When the whole lot is positioned in a VStack like I did on this pattern, your scrolling efficiency can be horrendous.

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

Understanding when to make use of a LazyVStack

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

As your person scrolls down a protracted listing of things, the LazyVStack will add an increasing number of views to the hierarchy. Because of this 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 person may 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 needs to be a lot better with the LazyVStack in comparison with the common VStack strategy.

In a LazyVStack, we’re free to make use of any kind of view that we wish, and we’ve got full management over how the listing finally ends up trying. We don’t achieve any out of the field performance which will be nice for those who require a better 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 screen), Record will look and behave barely otherwise.

Once you use views like NavigationLink within 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 can help 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 straightforward to get began with Record for those who don’t require plenty of customization.

Similar to LazyVStack, a Record will lazily consider its contents which implies it’s an excellent match for bigger units of information.

A brilliant fundamental instance of utilizing Record within the instance that we noticed earlier would appear like 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 needed to. This may be helpful if you’re utilizing Sections in your listing for instance:

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

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

Once 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 baby views:

Record {
  Part("Basic") {
    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 whether or not I want 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 submit, you discovered about VStack, LazyVStack and Record. I defined among the key issues and efficiency traits for these elements, with out digging to deeply into fixing each use case and chance. Particularly with Record there’s quite a bit you are able to do. The important thing level is that Record is a part that doesn’t all the time match what you want from it. In these circumstances, it’s helpful that we’ve got a LazyVStack.

You discovered that each Record and LazyVStack are optimized for displaying giant quantities of views, and that LazyVStack comes with the most important quantity of flexibility for those who’re keen to implement what you want your self.

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