To conclude this section in a section on lists and list items and the things you can do there,
let's look at one other important topic related to lists and that is virtual scrolling for which
we have a separate component in Ionic.
Now what is virtual scrolling?
Consider a list with a couple of list items, now if your viewing this on a device, no matter if it is
a desktop, PC or a mobile phone or a tablet,
you will have a certain viewport which is basically the visible area of your app,
so this for example of course could be a landscape phone here or a desktop.
And what we can see here is that we only see a few of these list items right,
we don't see all list items here,
there are certain list items which simply are not visible at the moment because they're not inside of
our current viewport. Now by default when rendering items with ngFor, they're always there,
no matter if we see them or not they're on the page and when we scroll down, we can then see them but
they're there even if we're not scrolling there.
So they are rendered, they are managed all the time. As you might imagine for longer lists,
this can be quite performance intensive especially on mobile devices and there especially on
mobile devices, that might not be that powerful.
Obviously I'm talking about very long lists here, I'm not talking about 20 list items or anything like
that but if you got a list with a couple of hundred items, then it really could hurt if you're rendering
all these items, no matter if they're visible or not.
The concept of virtual scrolling helps there, there
you basically don't render items that are far away from being visible and far away is actually a quite
heavy term,
with that I mean items that are let's say three or four items away from your viewport.
You also have certain items which are a kind of pre-rendered,
so they are fully rendered even though they're not visible yet but you're likely to scroll to them soon
because they're close to your viewport and therefore they are rendered so that when you do scroll down,
they are already there and you don't see them pop in. And then whenever you scroll, items that are not
visible are basically removed and items that are visible are added and they are added in advance to
provide smooth scrolling and to not hit the DOM too much and render and remove too many items at the
same time, the items that are getting invisible, so you're scrolling away from will actually be reused.
So if you're scrolling down, then the list item which is right now still visible, the moment it gets
invisible, it can get reused which means only its content is swapped and it's attached at the bottom
of the list again, so that when you're scrolling down, you're seeing that same item that already was rendered
before but with new content
and this is simply done to not re-render new items all the time but reuse the items that already were
rendered.
So overall, it's a performance optimization which can actually be a disadvantage if you use it on very
short lists because then you have all that extra logic running behind the scenes that checks whether
you're scrolling and what items need to be changed,
then you've got this extra logic and you might not benefit that much because your list isn't that long
but the longer your list is or especially if you have long lists of unpredictable length, so where you
don't know if it'll be 50 or 100 items long, then virtual scrolling can really be helpful.
Let's see it in practice.