1
00:00:02,850 --> 00:00:08,370
We already put some work into lists and we improved them by for example taking advantage of the index

2
00:00:08,370 --> 00:00:15,390
of our element to run some code which really takes into account on which element it runs. We can still

3
00:00:15,390 --> 00:00:22,320
improve this for example by taking care about this error we're getting with the key prop which is

4
00:00:22,320 --> 00:00:29,190
missing. The key prop is actually an important property we should add when rendering lists of data and

5
00:00:29,190 --> 00:00:31,540
that is why react tells us to do so.

6
00:00:31,920 --> 00:00:35,130
We haven't specified a key property in person

7
00:00:35,130 --> 00:00:41,970
it's actually a default property react expects to find on an element no matter if it's a custom component

8
00:00:42,330 --> 00:00:47,210
or a default html element which you render through a list,

9
00:00:47,220 --> 00:00:57,350
so basically by mapping an array into jsx elements. This key property helps react update the list efficiently.

10
00:00:57,360 --> 00:01:00,980
Consider the case we have here that we delete elements from the list,

11
00:01:00,990 --> 00:01:02,650
of course it works

12
00:01:02,730 --> 00:01:09,420
but behind the scenes react needs to find out what it actually needs to adjust in the overall dom and

13
00:01:09,420 --> 00:01:15,510
we'll dive deeper into what react exactly does in a specific section here in the course, where I'll give

14
00:01:15,510 --> 00:01:17,910
you a brief look behind the scenes.

15
00:01:17,910 --> 00:01:24,380
But basically what it does is it has something called a virtual dom where it compares what it would render

16
00:01:24,390 --> 00:01:31,920
now if it were to call the render method now or if it did actually adjust the real dom with the result

17
00:01:31,920 --> 00:01:37,380
of the render method to the previous dom it rendered. It does this compression of the future with the

18
00:01:37,380 --> 00:01:40,860
past basically. And for lists,

19
00:01:40,860 --> 00:01:46,180
it of course needs to find out which elements changed and react isn't a human,

20
00:01:46,200 --> 00:01:52,260
it doesn't clearly see as we do that we have three distinct elements with different names being rendered

21
00:01:52,860 --> 00:01:54,780
which I accidentally clicked.

22
00:01:54,780 --> 00:02:00,740
So it doesn't see that this is Max, Manu and Stephanie, to react, it just has a bunch of person components

23
00:02:01,170 --> 00:02:03,300
and it doesn't deeply inspect them,

24
00:02:03,300 --> 00:02:05,170
that would be super inefficient.

25
00:02:05,670 --> 00:02:08,700
So by default it will just re-render the whole list

26
00:02:08,700 --> 00:02:11,790
and for a long list this is very inefficient,

27
00:02:11,790 --> 00:02:17,040
that is why we should assign a key property to allow react to keep track of the individual

28
00:02:17,040 --> 00:02:24,720
elements so that it has a clear property it can compare between the different elements to find out which

29
00:02:24,720 --> 00:02:26,800
elements changed and which didn't.

30
00:02:26,910 --> 00:02:31,680
So that it only re-renders the elements which did change and not the whole list.

31
00:02:32,040 --> 00:02:38,870
So what we do is we assign key and now what do we assign here? Something unique.

32
00:02:39,180 --> 00:02:45,120
Typically you probably have some ID on your elements if you get them from a database or something

33
00:02:45,120 --> 00:02:45,790
like that,

34
00:02:45,810 --> 00:02:53,370
chances are high you do have an ID or any other unique identifier and your name would be unique but

35
00:02:53,370 --> 00:02:56,250
that's not necessarily guaranteed.

36
00:02:56,250 --> 00:03:02,340
So what we could do is we could use index because after all index changes for every element in the

37
00:03:02,340 --> 00:03:02,630
array,

38
00:03:02,630 --> 00:03:03,210
right?

39
00:03:03,450 --> 00:03:04,110
That's right

40
00:03:04,110 --> 00:03:06,920
but index also is part of the list itself.

41
00:03:07,020 --> 00:03:11,160
If the list changes, every element will receive a new index

42
00:03:11,160 --> 00:03:13,740
at least every element after the change.

43
00:03:13,740 --> 00:03:19,890
So index is not a good key, in the end it will not really help react. So we should really try to have a unique

44
00:03:19,890 --> 00:03:21,010
identifier

45
00:03:21,240 --> 00:03:26,530
and again, since this is just dummy data, here I'll simply add an ID. In real data,

46
00:03:26,550 --> 00:03:32,380
chances are high you do have such an ID. ID doesn't have to be a number,it can be anything unique,

47
00:03:32,460 --> 00:03:37,650
so here I'm just hammering on my keyboard to get some unique IDs.

48
00:03:37,650 --> 00:03:40,040
Now with that I can use that

49
00:03:40,050 --> 00:03:48,240
here with person ID to make sure that every element has a unique key react can use to compare the elements

50
00:03:48,240 --> 00:03:54,790
of the future with the elements of the past and only update the dom in places where it needs to update it.

51
00:03:55,020 --> 00:04:01,680
Now if that if we reload this and toggle persons, the key warning is gone. We get the same behavior as

52
00:04:01,680 --> 00:04:06,230
before and we can inspect this to see how it updates the dom here.

53
00:04:06,270 --> 00:04:12,390
But behind the scenes it's now able to do that in a more efficient way which of course is super important.