We already put some work into lists and we improved them by for example taking advantage of the index
of our element to run some code which really takes into account on which element it runs. We can still
improve this for example by taking care about this error we're getting with the key prop which is
missing. The key prop is actually an important property we should add when rendering lists of data and
that is why react tells us to do so.
We haven't specified a key property in person
it's actually a default property react expects to find on an element no matter if it's a custom component
or a default html element which you render through a list,
so basically by mapping an array into jsx elements. This key property helps react update the list efficiently.
Consider the case we have here that we delete elements from the list,
of course it works
but behind the scenes react needs to find out what it actually needs to adjust in the overall dom and
we'll dive deeper into what react exactly does in a specific section here in the course, where I'll give
you a brief look behind the scenes.
But basically what it does is it has something called a virtual dom where it compares what it would render
now if it were to call the render method now or if it did actually adjust the real dom with the result
of the render method to the previous dom it rendered. It does this compression of the future with the
past basically. And for lists,
it of course needs to find out which elements changed and react isn't a human,
it doesn't clearly see as we do that we have three distinct elements with different names being rendered
which I accidentally clicked.
So it doesn't see that this is Max, Manu and Stephanie, to react, it just has a bunch of person components
and it doesn't deeply inspect them,
that would be super inefficient.
So by default it will just re-render the whole list
and for a long list this is very inefficient,
that is why we should assign a key property to allow react to keep track of the individual
elements so that it has a clear property it can compare between the different elements to find out which
elements changed and which didn't.
So that it only re-renders the elements which did change and not the whole list.
So what we do is we assign key and now what do we assign here? Something unique.
Typically you probably have some ID on your elements if you get them from a database or something
like that,
chances are high you do have an ID or any other unique identifier and your name would be unique but
that's not necessarily guaranteed.
So what we could do is we could use index because after all index changes for every element in the
array,
right?
That's right
but index also is part of the list itself.
If the list changes, every element will receive a new index
at least every element after the change.
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
identifier
and again, since this is just dummy data, here I'll simply add an ID. In real data,
chances are high you do have such an ID. ID doesn't have to be a number,it can be anything unique,
so here I'm just hammering on my keyboard to get some unique IDs.
Now with that I can use that
here with person ID to make sure that every element has a unique key react can use to compare the elements
of the future with the elements of the past and only update the dom in places where it needs to update it.
Now if that if we reload this and toggle persons, the key warning is gone. We get the same behavior as
before and we can inspect this to see how it updates the dom here.
But behind the scenes it's now able to do that in a more efficient way which of course is super important.