1 00:00:00,870 --> 00:00:05,070 We've now got some content visible on the screen but unfortunately we've also got this big warning message 2 00:00:05,070 --> 00:00:06,200 right here. 3 00:00:06,200 --> 00:00:10,050 So in this video we're going to figure out what that warning message is all about and then fix it up. 4 00:00:10,050 --> 00:00:10,650 All right. 5 00:00:10,750 --> 00:00:12,990 So I'll show you two diagrams really quickly. 6 00:00:12,990 --> 00:00:17,160 The first diagram that we're going to look at is going to tell you what happens to our list when we 7 00:00:17,160 --> 00:00:19,330 are not providing a key property. 8 00:00:19,380 --> 00:00:21,840 Some of the words This is the situation that we are currently in. 9 00:00:22,110 --> 00:00:24,650 And this is not a good situation to have. 10 00:00:24,680 --> 00:00:28,120 So right now if we were to say render our list of elements. 11 00:00:28,140 --> 00:00:30,250 So here's our list of elements right here. 12 00:00:30,300 --> 00:00:32,270 We've got all of our different friend objects. 13 00:00:32,340 --> 00:00:37,560 It would show up as some visible element on the screen of the device and everything is pretty much OK 14 00:00:38,530 --> 00:00:43,260 the issue starts to come whenever we start to change our original array of data. 15 00:00:43,370 --> 00:00:47,610 So let's say right here that we delete forensics that object right there. 16 00:00:47,770 --> 00:00:53,230 If we delete that element or that object right there you and I would expect to see forensics disappear 17 00:00:53,230 --> 00:00:57,240 from the screen and I can tell you without a doubt forensics would disappear. 18 00:00:57,430 --> 00:01:02,950 The issue when we don't provide that key is how our list gets updated on the screen. 19 00:01:02,950 --> 00:01:09,280 So if we do not provide a key the way that React Native updates our list is it deletes everything visible 20 00:01:09,280 --> 00:01:14,190 on the screen so it deletes brand one two three four five six and seven entirely. 21 00:01:14,550 --> 00:01:19,180 It then looks at the new array of data and renders a single element for each one. 22 00:01:19,870 --> 00:01:22,830 So we'd end up with a situation like this right here. 23 00:01:22,870 --> 00:01:27,730 The downside to this approach just to be clear is that React Native has to delete every element on the 24 00:01:27,730 --> 00:01:32,430 screen related to our list and then rebuild the entire thing from scratch. 25 00:01:32,440 --> 00:01:33,540 That's not ideal. 26 00:01:33,550 --> 00:01:38,470 We don't want React Native to rebuild an entire list just because we made one little change to our array 27 00:01:38,470 --> 00:01:39,990 of data over here. 28 00:01:40,150 --> 00:01:41,210 What would be ideal. 29 00:01:41,230 --> 00:01:47,500 What we do want is for React Native to detect that we deleted specifically that object right there and 30 00:01:47,500 --> 00:01:53,380 we would want it to delete just that element just forensics and then essentially move up 4 and 7 like 31 00:01:53,380 --> 00:01:55,910 so that would be the ideal case. 32 00:01:55,930 --> 00:02:00,230 But again that does not happen if we don't provide this key thing. 33 00:02:00,240 --> 00:02:04,450 So let me now tell you what happens if we provide the key and I know we haven't really explained what 34 00:02:04,450 --> 00:02:05,620 the key is just yet. 35 00:02:05,620 --> 00:02:08,580 That's waiting until you right now OK. 36 00:02:08,630 --> 00:02:13,580 So the idea behind this key property is that it allows React Native to kind of track these different 37 00:02:13,640 --> 00:02:19,010 objects and detect when we delete one of them when we delete one these objects React Native can then 38 00:02:19,010 --> 00:02:24,980 very easily say Oh ok I see that maybe we just deleted friend with four right here a friend four right 39 00:02:24,980 --> 00:02:32,210 here and it would then need to just delete that element that has a key of D and then it could just move 40 00:02:32,210 --> 00:02:38,280 up four and five like so and React Native did not need to rebuild the entire list from scratch. 41 00:02:38,450 --> 00:02:42,690 So what's the idea behind the key exactly now that we understand kind of what it does. 42 00:02:42,830 --> 00:02:45,630 Essentially the key right here allows React Native to tie. 43 00:02:45,650 --> 00:02:48,430 The definition of some particular object of data. 44 00:02:48,440 --> 00:02:52,980 So in this case like French for with some actual element that appears on the screen. 45 00:02:53,330 --> 00:02:56,620 So we give French for right here this object a key of D. 46 00:02:56,720 --> 00:03:01,700 React Native can create an element out of it like this friend for that's visible on the screen and tag 47 00:03:01,700 --> 00:03:03,410 it with that same exact key. 48 00:03:04,190 --> 00:03:09,410 So now React Native has kind of a mapping between this object and this element on the screen and it 49 00:03:09,410 --> 00:03:14,450 knows that if we delete this object and it's no longer present inside of our data array it knows exactly 50 00:03:14,450 --> 00:03:17,980 what element on the screen that it needs to clean up as well. 51 00:03:18,040 --> 00:03:19,320 So that's what the key does. 52 00:03:19,340 --> 00:03:23,990 It's really just allowing React Native to track the different objects we are passing in to try to render 53 00:03:23,990 --> 00:03:29,090 on the screen and then automatically cleanup some element that is visible on the screen whenever the 54 00:03:29,090 --> 00:03:31,860 corresponding object goes away. 55 00:03:31,910 --> 00:03:37,220 The important thing to keep in mind here no one is that this key thing is primarily a performance optimization. 56 00:03:37,460 --> 00:03:42,480 And number two it's a performance optimization around making updates to our list. 57 00:03:42,560 --> 00:03:44,620 Right now we've got a static list of data. 58 00:03:44,750 --> 00:03:49,190 So technically even if we add in this key property or this key thing we're not going to really see any 59 00:03:49,190 --> 00:03:54,380 kind of performance increase because well we're not changing our original array of data right now. 60 00:03:54,380 --> 00:03:59,570 Nonetheless React Native always assumes that we might eventually change that list of data which is why 61 00:03:59,630 --> 00:04:02,510 it's showing a warning right here okay. 62 00:04:02,540 --> 00:04:05,060 Now we understand exactly what's going on with this key thing. 63 00:04:05,060 --> 00:04:08,480 Let's take a pause right here when we come back the next video we're going to take a look at two different 64 00:04:08,480 --> 00:04:10,640 ways that we can implement that key property.