We've now got access to our list of libraries inside of the library list component which means it's
time to maybe pivot away from redux a little bit and focus more on the re-act side of things and just
figure out how we are going to render this list of components.
Now in the past we have already figured out how to make a list.
We did so by using the map function to turn a list of data objects into a list of components.
This is a fine approach for small lists like limited lists of data.
But as soon as we start trying to render like dozens of items or hundreds or even thousands of items
we need a better approach when it comes to the performance side of our application.
Now I want to preface all this by saying yes our list of libraries is very small.
We've only got like nine right now.
Yes it is a small list but I still want to pretend as though maybe it's a very large list of libraries.
Right.
I want to figure out how we can render this very large list of libraries appropriately.
So here's how we're going to tackle this.
First we're going to look at the theory behind rendering a large list of items and then we're going
to implement it inside of our component.
So I pull a diagram up on the screen really quick and I know this is kind of a nasty one but just bear
with me in the background.
I've got a mobile device so we're going to pretend for a second that I've got a mobile device that's
running an app that is trying to show a list of items.
Right and maybe I've got so many items that some number of them are visible on the screen like the top
half right here.
And it's not until I like scroll down like click here and then drag up right that I'm going to scroll
these by bottom items into view.
You can kind of imagine that you know perhaps these items are there they're just off the screen of the
device and it's not until I scroll that they kind of move up and appear on the screen.
So that's the idea behind this diagram right here.
Now I'm going to go for one second.
This is the this is another diagram.
There's kind of modeling how we are building lists right now by using the map function on the screen.
I've got a item in every one of these green boxes.
So the box that says item represents like a javascript object like for us a single album or a single
library or whatever object it might be.
And the green box around it represents a re-act component component.
So with our current approach of rendering lists we take every single item in the list and we instantly
map it and create a distinct component right like we instantly create one component for every item we
have.
So if we have a list of like 100 items or 100 books or libraries or whatever it might be we create 100
components in memory to show every single one of those.
The instant we go to create our list.
So what's the downside to this approach.
The downside is that even if our user can only see light you know four or five components on the screen
at a time we still have to go through all of that upfront work of rendering a hundred different items
and then those 100 different items 100 different components might be just sitting there and memory.
So that is the source of poor performance.
The upfront rendering of a bunch of items and then holding them in memory mode devices are traditionally
memory constrained.
So any time that we can reduce our memory footprint inside of our app it is definitely a good thing.
Just to be really clear one more time I just want to echo it again.
The reason that mapping over a list of items to build a list is bad for performance.
Is that for every item in that list we are instantaneously creating one component.
So 100 items in a list equals 100 components.
We have to create a front to address this performance issue reac native includes a little tool called
List view the list view is a component that remedies this list or this issue of rendering a bunch of
items by using a little trick.
OK.
So it's the last kind of weird diagram we got to look at
the list view is a component and we are going to use it to obviously you know render a list of items
to the user the list view works by figuring out what items in the list are visible to the user at a
given time.
So if this is my mobile device in the background over here then the only items which are you know kind
of like technically visible would be these right here.
So the list view figures out what items are visible and then it creates a single component for only
the items that should be visible on the screen.
So in this case instead of creating 100 components for 100 different items it might only create six
components for these six items that are actually visible on the screen.
Now the real magic happens when we scroll through the list when I start scrolling around that's when
the magic happens.
If I.
Let's imagine that I like click here.
Or like you know I'd tap on screen here and then pull up so I'm intending to bring these bottom items
into view the list view watches for any scroll event from the users so like as soon as you start to
scroll the list view kicks in and says oh scrawlings happening something like I probably I might need
to handle this in some fashion.
The list few watches for any item that starts to scroll out of view.
So again if I click here like drag here and then dried up this item at the very top might be moving
out of view very soon.
Right so maybe I now have a situation where it's like that where this item is starting to come on the
screen and this item just left the screen.
So the list for you does is it takes this instant instant so the component right here it moves it down
to the bottom of the screen and you fix the ordering it moves it down to the bottom of the screen.
There you go.
And then it plugs the new item into it.
So the whole idea here is that as a user scrolls around the list view is reusing the same components
over and over and over again.
And it's just swapping out the data that sits inside of them.
So if I then scroll a little bit more and now I'm like down here the list view is going to say OK this
phone right here is not visible to the user anymore.
I'm going to take that component you know throw it down here and I'm going to stick this new item inside
of it.
And then this item up top.
Yeah that one's no longer visible so it doesn't need a component component anymore.
So basically in practice the way that the list view works is to take only a subset of our total list
at any given time and only render that subset.
In addition it takes whatever kind of wrapping list item component is being used.
And it reduces it throughout the entire list.
So that is how the history works.
That is how we gain performance on really long lists of data.
Let's now stop lecturing and continue in the next section and focus on implementation of building a
list for you