1
00:00:01,050 --> 00:00:06,030
We've now got access to our list of libraries inside of the library list component which means it's

2
00:00:06,030 --> 00:00:11,070
time to maybe pivot away from redux a little bit and focus more on the re-act side of things and just

3
00:00:11,070 --> 00:00:14,240
figure out how we are going to render this list of components.

4
00:00:14,380 --> 00:00:17,450
Now in the past we have already figured out how to make a list.

5
00:00:17,520 --> 00:00:24,080
We did so by using the map function to turn a list of data objects into a list of components.

6
00:00:24,110 --> 00:00:28,280
This is a fine approach for small lists like limited lists of data.

7
00:00:28,500 --> 00:00:33,530
But as soon as we start trying to render like dozens of items or hundreds or even thousands of items

8
00:00:33,810 --> 00:00:39,260
we need a better approach when it comes to the performance side of our application.

9
00:00:39,270 --> 00:00:43,440
Now I want to preface all this by saying yes our list of libraries is very small.

10
00:00:43,440 --> 00:00:45,210
We've only got like nine right now.

11
00:00:45,480 --> 00:00:51,310
Yes it is a small list but I still want to pretend as though maybe it's a very large list of libraries.

12
00:00:51,310 --> 00:00:51,630
Right.

13
00:00:51,650 --> 00:00:56,590
I want to figure out how we can render this very large list of libraries appropriately.

14
00:00:57,300 --> 00:00:59,260
So here's how we're going to tackle this.

15
00:00:59,310 --> 00:01:03,990
First we're going to look at the theory behind rendering a large list of items and then we're going

16
00:01:03,990 --> 00:01:06,740
to implement it inside of our component.

17
00:01:06,900 --> 00:01:11,190
So I pull a diagram up on the screen really quick and I know this is kind of a nasty one but just bear

18
00:01:11,190 --> 00:01:13,980
with me in the background.

19
00:01:13,980 --> 00:01:18,870
I've got a mobile device so we're going to pretend for a second that I've got a mobile device that's

20
00:01:18,870 --> 00:01:22,140
running an app that is trying to show a list of items.

21
00:01:22,290 --> 00:01:29,130
Right and maybe I've got so many items that some number of them are visible on the screen like the top

22
00:01:29,130 --> 00:01:30,180
half right here.

23
00:01:30,180 --> 00:01:37,380
And it's not until I like scroll down like click here and then drag up right that I'm going to scroll

24
00:01:37,380 --> 00:01:39,570
these by bottom items into view.

25
00:01:39,680 --> 00:01:44,580
You can kind of imagine that you know perhaps these items are there they're just off the screen of the

26
00:01:44,580 --> 00:01:48,980
device and it's not until I scroll that they kind of move up and appear on the screen.

27
00:01:49,020 --> 00:01:52,040
So that's the idea behind this diagram right here.

28
00:01:53,360 --> 00:01:56,120
Now I'm going to go for one second.

29
00:01:56,120 --> 00:01:58,240
This is the this is another diagram.

30
00:01:58,240 --> 00:02:03,890
There's kind of modeling how we are building lists right now by using the map function on the screen.

31
00:02:03,890 --> 00:02:07,630
I've got a item in every one of these green boxes.

32
00:02:07,820 --> 00:02:15,080
So the box that says item represents like a javascript object like for us a single album or a single

33
00:02:15,080 --> 00:02:17,820
library or whatever object it might be.

34
00:02:17,930 --> 00:02:23,330
And the green box around it represents a re-act component component.

35
00:02:23,480 --> 00:02:31,250
So with our current approach of rendering lists we take every single item in the list and we instantly

36
00:02:31,250 --> 00:02:38,540
map it and create a distinct component right like we instantly create one component for every item we

37
00:02:38,540 --> 00:02:39,060
have.

38
00:02:39,170 --> 00:02:47,190
So if we have a list of like 100 items or 100 books or libraries or whatever it might be we create 100

39
00:02:47,240 --> 00:02:50,770
components in memory to show every single one of those.

40
00:02:50,780 --> 00:02:53,090
The instant we go to create our list.

41
00:02:53,420 --> 00:02:55,400
So what's the downside to this approach.

42
00:02:55,400 --> 00:03:01,250
The downside is that even if our user can only see light you know four or five components on the screen

43
00:03:01,250 --> 00:03:07,430
at a time we still have to go through all of that upfront work of rendering a hundred different items

44
00:03:07,790 --> 00:03:13,220
and then those 100 different items 100 different components might be just sitting there and memory.

45
00:03:13,250 --> 00:03:15,360
So that is the source of poor performance.

46
00:03:15,380 --> 00:03:22,730
The upfront rendering of a bunch of items and then holding them in memory mode devices are traditionally

47
00:03:22,730 --> 00:03:23,740
memory constrained.

48
00:03:23,870 --> 00:03:29,460
So any time that we can reduce our memory footprint inside of our app it is definitely a good thing.

49
00:03:31,460 --> 00:03:34,400
Just to be really clear one more time I just want to echo it again.

50
00:03:34,460 --> 00:03:39,810
The reason that mapping over a list of items to build a list is bad for performance.

51
00:03:39,860 --> 00:03:45,080
Is that for every item in that list we are instantaneously creating one component.

52
00:03:45,110 --> 00:03:48,910
So 100 items in a list equals 100 components.

53
00:03:48,920 --> 00:03:56,870
We have to create a front to address this performance issue reac native includes a little tool called

54
00:03:56,960 --> 00:04:03,320
List view the list view is a component that remedies this list or this issue of rendering a bunch of

55
00:04:03,320 --> 00:04:06,270
items by using a little trick.

56
00:04:06,870 --> 00:04:07,260
OK.

57
00:04:07,280 --> 00:04:09,980
So it's the last kind of weird diagram we got to look at

58
00:04:13,340 --> 00:04:17,780
the list view is a component and we are going to use it to obviously you know render a list of items

59
00:04:17,780 --> 00:04:24,620
to the user the list view works by figuring out what items in the list are visible to the user at a

60
00:04:24,620 --> 00:04:25,700
given time.

61
00:04:25,700 --> 00:04:30,470
So if this is my mobile device in the background over here then the only items which are you know kind

62
00:04:30,470 --> 00:04:34,030
of like technically visible would be these right here.

63
00:04:34,490 --> 00:04:40,820
So the list view figures out what items are visible and then it creates a single component for only

64
00:04:40,820 --> 00:04:43,400
the items that should be visible on the screen.

65
00:04:43,400 --> 00:04:49,940
So in this case instead of creating 100 components for 100 different items it might only create six

66
00:04:49,940 --> 00:04:55,360
components for these six items that are actually visible on the screen.

67
00:04:55,400 --> 00:05:00,620
Now the real magic happens when we scroll through the list when I start scrolling around that's when

68
00:05:00,620 --> 00:05:02,250
the magic happens.

69
00:05:02,630 --> 00:05:03,170
If I.

70
00:05:03,190 --> 00:05:05,050
Let's imagine that I like click here.

71
00:05:05,050 --> 00:05:10,100
Or like you know I'd tap on screen here and then pull up so I'm intending to bring these bottom items

72
00:05:10,100 --> 00:05:16,730
into view the list view watches for any scroll event from the users so like as soon as you start to

73
00:05:16,730 --> 00:05:22,220
scroll the list view kicks in and says oh scrawlings happening something like I probably I might need

74
00:05:22,220 --> 00:05:24,250
to handle this in some fashion.

75
00:05:24,470 --> 00:05:28,590
The list few watches for any item that starts to scroll out of view.

76
00:05:28,640 --> 00:05:35,630
So again if I click here like drag here and then dried up this item at the very top might be moving

77
00:05:35,750 --> 00:05:37,340
out of view very soon.

78
00:05:37,340 --> 00:05:43,850
Right so maybe I now have a situation where it's like that where this item is starting to come on the

79
00:05:43,850 --> 00:05:46,820
screen and this item just left the screen.

80
00:05:47,060 --> 00:05:54,020
So the list for you does is it takes this instant instant so the component right here it moves it down

81
00:05:54,020 --> 00:06:00,690
to the bottom of the screen and you fix the ordering it moves it down to the bottom of the screen.

82
00:06:01,690 --> 00:06:02,580
There you go.

83
00:06:03,190 --> 00:06:05,650
And then it plugs the new item into it.

84
00:06:05,650 --> 00:06:12,130
So the whole idea here is that as a user scrolls around the list view is reusing the same components

85
00:06:12,220 --> 00:06:13,940
over and over and over again.

86
00:06:14,290 --> 00:06:17,970
And it's just swapping out the data that sits inside of them.

87
00:06:17,980 --> 00:06:24,590
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

88
00:06:24,900 --> 00:06:27,120
phone right here is not visible to the user anymore.

89
00:06:27,130 --> 00:06:33,460
I'm going to take that component you know throw it down here and I'm going to stick this new item inside

90
00:06:33,460 --> 00:06:33,990
of it.

91
00:06:34,210 --> 00:06:35,510
And then this item up top.

92
00:06:35,560 --> 00:06:39,400
Yeah that one's no longer visible so it doesn't need a component component anymore.

93
00:06:39,850 --> 00:06:46,590
So basically in practice the way that the list view works is to take only a subset of our total list

94
00:06:46,600 --> 00:06:50,470
at any given time and only render that subset.

95
00:06:50,470 --> 00:06:54,920
In addition it takes whatever kind of wrapping list item component is being used.

96
00:06:55,120 --> 00:06:58,610
And it reduces it throughout the entire list.

97
00:06:58,780 --> 00:07:01,030
So that is how the history works.

98
00:07:01,030 --> 00:07:04,400
That is how we gain performance on really long lists of data.

99
00:07:04,570 --> 00:07:10,630
Let's now stop lecturing and continue in the next section and focus on implementation of building a

100
00:07:10,630 --> 00:07:11,110
list for you