We've now got some content visible on the screen but unfortunately we've also got this big warning message
right here.
So in this video we're going to figure out what that warning message is all about and then fix it up.
All right.
So I'll show you two diagrams really quickly.
The first diagram that we're going to look at is going to tell you what happens to our list when we
are not providing a key property.
Some of the words This is the situation that we are currently in.
And this is not a good situation to have.
So right now if we were to say render our list of elements.
So here's our list of elements right here.
We've got all of our different friend objects.
It would show up as some visible element on the screen of the device and everything is pretty much OK
the issue starts to come whenever we start to change our original array of data.
So let's say right here that we delete forensics that object right there.
If we delete that element or that object right there you and I would expect to see forensics disappear
from the screen and I can tell you without a doubt forensics would disappear.
The issue when we don't provide that key is how our list gets updated on the screen.
So if we do not provide a key the way that React Native updates our list is it deletes everything visible
on the screen so it deletes brand one two three four five six and seven entirely.
It then looks at the new array of data and renders a single element for each one.
So we'd end up with a situation like this right here.
The downside to this approach just to be clear is that React Native has to delete every element on the
screen related to our list and then rebuild the entire thing from scratch.
That's not ideal.
We don't want React Native to rebuild an entire list just because we made one little change to our array
of data over here.
What would be ideal.
What we do want is for React Native to detect that we deleted specifically that object right there and
we would want it to delete just that element just forensics and then essentially move up 4 and 7 like
so that would be the ideal case.
But again that does not happen if we don't provide this key thing.
So let me now tell you what happens if we provide the key and I know we haven't really explained what
the key is just yet.
That's waiting until you right now OK.
So the idea behind this key property is that it allows React Native to kind of track these different
objects and detect when we delete one of them when we delete one these objects React Native can then
very easily say Oh ok I see that maybe we just deleted friend with four right here a friend four right
here and it would then need to just delete that element that has a key of D and then it could just move
up four and five like so and React Native did not need to rebuild the entire list from scratch.
So what's the idea behind the key exactly now that we understand kind of what it does.
Essentially the key right here allows React Native to tie.
The definition of some particular object of data.
So in this case like French for with some actual element that appears on the screen.
So we give French for right here this object a key of D.
React Native can create an element out of it like this friend for that's visible on the screen and tag
it with that same exact key.
So now React Native has kind of a mapping between this object and this element on the screen and it
knows that if we delete this object and it's no longer present inside of our data array it knows exactly
what element on the screen that it needs to clean up as well.
So that's what the key does.
It's really just allowing React Native to track the different objects we are passing in to try to render
on the screen and then automatically cleanup some element that is visible on the screen whenever the
corresponding object goes away.
The important thing to keep in mind here no one is that this key thing is primarily a performance optimization.
And number two it's a performance optimization around making updates to our list.
Right now we've got a static list of data.
So technically even if we add in this key property or this key thing we're not going to really see any
kind of performance increase because well we're not changing our original array of data right now.
Nonetheless React Native always assumes that we might eventually change that list of data which is why
it's showing a warning right here okay.
Now we understand exactly what's going on with this key thing.
Let's take a pause right here when we come back the next video we're going to take a look at two different
ways that we can implement that key property.