Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,160 --> 00:00:05,020
So why are we getting this key warning?
2
00:00:05,020 --> 00:00:08,230
After all it looks like everything works.
3
00:00:08,230 --> 00:00:10,841
Well React has a special concept when it comes
4
00:00:10,841 --> 00:00:13,010
to rendering lists of data
5
00:00:13,010 --> 00:00:16,332
a concept which exists to ensure that React is
6
00:00:16,332 --> 00:00:20,880
able to update and render such lists efficiently
7
00:00:20,880 --> 00:00:24,920
without performance losses, or bugs, which may occur.
8
00:00:24,920 --> 00:00:28,280
And I wanna show you which problem we have
9
00:00:28,280 --> 00:00:30,313
with the current implementation.
10
00:00:31,190 --> 00:00:33,260
If you have a look at your Developer Tools
11
00:00:33,260 --> 00:00:36,370
and you go to the Elements tab, there,
12
00:00:36,370 --> 00:00:38,600
you can inspect your
13
00:00:38,600 --> 00:00:41,290
your list here, which is this list of div's.
14
00:00:41,290 --> 00:00:44,640
We could change this to a list with list items
15
00:00:44,640 --> 00:00:48,370
but for the moment, I'll stick to these div's here.
16
00:00:48,370 --> 00:00:50,760
And if we now have a look at this list here
17
00:00:50,760 --> 00:00:53,150
then you should watch the part here
18
00:00:53,150 --> 00:00:55,810
on the right in Developer Tools
19
00:00:55,810 --> 00:00:58,160
as I add a new item,
20
00:00:58,160 --> 00:00:59,880
A book 2, for example,
21
00:00:59,880 --> 00:01:02,280
for 39.99
22
00:01:02,280 --> 00:01:03,670
if I add dat,
23
00:01:03,670 --> 00:01:05,693
watch these div's on the right.
24
00:01:07,170 --> 00:01:08,570
Did you see what happened?
25
00:01:08,570 --> 00:01:10,226
This last item flashed.
26
00:01:10,226 --> 00:01:12,930
And if our item flashes here, it means
27
00:01:12,930 --> 00:01:14,940
that it was edited
28
00:01:14,940 --> 00:01:18,270
or added by the browser.
29
00:01:18,270 --> 00:01:20,780
Now it's strange that the last item flashed
30
00:01:20,780 --> 00:01:22,700
because actually the new item was added
31
00:01:22,700 --> 00:01:26,740
as the first item, the top most item in this list
32
00:01:26,740 --> 00:01:28,550
to understand what's going on.
33
00:01:28,550 --> 00:01:31,220
Let me expand this first item,
34
00:01:31,220 --> 00:01:32,830
A book 2, which I just added.
35
00:01:32,830 --> 00:01:35,183
And let me add a third item here,
36
00:01:36,410 --> 00:01:37,320
like this.
37
00:01:37,320 --> 00:01:40,263
Let's add this and click Add Expense
38
00:01:40,263 --> 00:01:41,629
and you see
39
00:01:41,629 --> 00:01:43,170
this also flashed
40
00:01:43,170 --> 00:01:46,149
if not rewind and go back a couple of seconds.
41
00:01:46,149 --> 00:01:48,970
And you'll see that this h2 tag of the
42
00:01:48,970 --> 00:01:50,350
first item,
43
00:01:50,350 --> 00:01:53,678
also flashed when I added this new item.
44
00:01:53,678 --> 00:01:57,230
So what actually happens here when I add a new item
45
00:01:57,230 --> 00:02:00,600
is that React, renders this new item
46
00:02:00,600 --> 00:02:04,000
as the last item in this list of div's
47
00:02:04,000 --> 00:02:07,570
and updates all items and replace their content,
48
00:02:07,570 --> 00:02:08,669
such that it again
49
00:02:08,669 --> 00:02:12,120
matches the order of the items in my Array.
50
00:02:12,120 --> 00:02:14,790
And this is not great.
51
00:02:14,790 --> 00:02:15,750
This is happening
52
00:02:15,750 --> 00:02:19,130
because to React all these items look similar
53
00:02:19,130 --> 00:02:21,970
and it only sees that my Array changed
54
00:02:21,970 --> 00:02:24,210
that it's now longer than before.
55
00:02:24,210 --> 00:02:27,020
And hence it simply renders an additional div
56
00:02:27,020 --> 00:02:28,800
and it adds that at the end.
57
00:02:28,800 --> 00:02:31,274
And then it simply walks through all the items
58
00:02:31,274 --> 00:02:34,700
and updates the content inside of every item
59
00:02:34,700 --> 00:02:36,693
to match the Array content again.
60
00:02:37,660 --> 00:02:40,530
The final result, therefore is correct here
61
00:02:40,530 --> 00:02:44,220
but from a performance perspective this is not great
62
00:02:44,220 --> 00:02:47,860
because all items are visited and updated
63
00:02:47,860 --> 00:02:50,400
and it can even lead to bugs.
64
00:02:50,400 --> 00:02:53,450
If the expense items would be state full items
65
00:02:53,450 --> 00:02:56,710
and we would have some state managed inside of that.
66
00:02:56,710 --> 00:02:59,920
Then if, for example, our first item,
67
00:02:59,920 --> 00:03:02,640
if it has a certain state if we add a new item
68
00:03:02,640 --> 00:03:04,810
the old first item would be overwritten
69
00:03:04,810 --> 00:03:06,620
with the new first item.
70
00:03:06,620 --> 00:03:09,950
Hence any state changes we might've had in there
71
00:03:09,950 --> 00:03:11,170
would be lost.
72
00:03:11,170 --> 00:03:13,660
So besides potential performance issues
73
00:03:13,660 --> 00:03:15,593
we could also run into bugs.
74
00:03:16,730 --> 00:03:18,530
So that is a problem.
75
00:03:18,530 --> 00:03:20,100
And the question therefore is,
76
00:03:20,100 --> 00:03:23,240
why does React, behave like this?
77
00:03:23,240 --> 00:03:26,230
The answer is because it has no other way.
78
00:03:26,230 --> 00:03:28,497
It currently simply checks the length
79
00:03:28,497 --> 00:03:30,640
of the Array and then has a look
80
00:03:30,640 --> 00:03:33,163
at the number of items that were already rendered.
81
00:03:34,080 --> 00:03:37,810
The individual items all look similar to React though
82
00:03:37,810 --> 00:03:41,220
so it can't know where a new item should be added
83
00:03:41,220 --> 00:03:42,633
or anything like that.
84
00:03:43,760 --> 00:03:46,640
That's why we get this warning because we have a way
85
00:03:46,640 --> 00:03:50,050
of telling react where a new item it should be added.
86
00:03:50,050 --> 00:03:52,660
And we do that by going to the place
87
00:03:52,660 --> 00:03:55,010
where we output our list of items.
88
00:03:55,010 --> 00:03:56,920
So does map method here
89
00:03:56,920 --> 00:04:01,320
and we then add a special prop to this item here.
90
00:04:01,320 --> 00:04:03,490
And that's the key prop.
91
00:04:03,490 --> 00:04:07,379
This is not a prop we are using instead of expense item
92
00:04:07,379 --> 00:04:11,390
but instead it's a prop you can add to any component
93
00:04:11,390 --> 00:04:14,220
no matter if it's a custom component by you
94
00:04:14,220 --> 00:04:19,220
or if it's a built in HTML element, you can always add this.
95
00:04:19,220 --> 00:04:21,930
And if you do add it, if you add the key
96
00:04:21,930 --> 00:04:24,870
to your component or HTML element,
97
00:04:24,870 --> 00:04:26,600
then you can
98
00:04:26,600 --> 00:04:30,990
help React identify the individual items.
99
00:04:30,990 --> 00:04:33,790
For dat you need to set a unique
100
00:04:33,790 --> 00:04:36,720
value per list item
101
00:04:36,720 --> 00:04:38,860
and dat, for example in this case here
102
00:04:38,860 --> 00:04:40,540
would be the expense ID
103
00:04:41,430 --> 00:04:43,520
because in our expenses Array,
104
00:04:43,520 --> 00:04:45,993
every item has a unique ID.
105
00:04:46,990 --> 00:04:50,370
And if you wonder what you do, if you have no unique ID
106
00:04:50,370 --> 00:04:53,730
then you could use the second argument which you get here
107
00:04:53,730 --> 00:04:56,070
for the function you pass to map
108
00:04:56,070 --> 00:04:58,680
which is an automatically managed index
109
00:04:58,680 --> 00:05:02,100
though it's discouraged to use that since with that
110
00:05:02,100 --> 00:05:04,776
you can still run into bugs because the index
111
00:05:04,776 --> 00:05:07,200
for a given item is always the same
112
00:05:07,200 --> 00:05:11,390
and not directly attached to the content of the item.
113
00:05:11,390 --> 00:05:12,980
For the ID that's different
114
00:05:12,980 --> 00:05:17,650
every item with a certain content has a clear unique ID.
115
00:05:17,650 --> 00:05:19,504
And in reality, it turns out that
116
00:05:19,504 --> 00:05:23,560
in most scenarios you do have some unique ID
117
00:05:23,560 --> 00:05:27,100
because typically you are rendering some data which comes
118
00:05:27,100 --> 00:05:29,370
from a database or anything like that.
119
00:05:29,370 --> 00:05:32,730
And there you work with unique IDs anyways.
120
00:05:32,730 --> 00:05:36,910
So finding some unique identifier is no problem
121
00:05:36,910 --> 00:05:41,100
and you can use any primitive value as a unique identifier
122
00:05:41,100 --> 00:05:45,732
any number or String that can be unique identifiers.
123
00:05:45,732 --> 00:05:47,860
So here I add this key,
124
00:05:47,860 --> 00:05:49,590
pointing at expense ID.
125
00:05:49,590 --> 00:05:51,480
And once we do that, if we reload
126
00:05:51,480 --> 00:05:53,460
we no longer get that warning.
127
00:05:53,460 --> 00:05:55,020
And if I now
128
00:05:55,020 --> 00:05:57,930
inspect my, my list here again
129
00:05:57,930 --> 00:06:02,200
and I inspect the, the title of the currently first item
130
00:06:02,200 --> 00:06:05,120
if I now add a new item again,
131
00:06:05,120 --> 00:06:06,380
like this
132
00:06:06,380 --> 00:06:07,213
book
133
00:06:09,010 --> 00:06:13,192
you will see that this h2 tag did now not flash instead
134
00:06:13,192 --> 00:06:16,470
this div flashed and this div was also now added
135
00:06:16,470 --> 00:06:18,960
at the beginning of the list correctly.
136
00:06:18,960 --> 00:06:21,560
This div here, I mean, as it should be, because
137
00:06:21,560 --> 00:06:25,490
now React is able to uniquely identify all these items
138
00:06:25,490 --> 00:06:29,460
and it's therefore aware, not just how long the Array is
139
00:06:29,460 --> 00:06:32,450
but also aware which items should be placed.
140
00:06:32,450 --> 00:06:35,923
And it's able to update this list more efficient way.
141
00:06:36,800 --> 00:06:38,120
So long story short.
142
00:06:38,120 --> 00:06:40,760
You should always add such a key
143
00:06:40,760 --> 00:06:43,730
when mapping out lists of items.
144
00:06:43,730 --> 00:06:47,060
And I hope I could explain why that matters.
145
00:06:47,060 --> 00:06:50,110
You don't need to know why it's enough if you add it.
146
00:06:50,110 --> 00:06:51,810
But I think it's always important
147
00:06:51,810 --> 00:06:54,150
that you also do understand what's going on
148
00:06:54,150 --> 00:06:56,933
behind the scenes and why you're doing something.
11264
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.