Original subtitles

So why are we getting this key warning?

After all it looks like everything works.

Well React has a special concept when it comes

to rendering lists of data

a concept which exists to ensure that React is

able to update and render such lists efficiently

without performance losses, or bugs, which may occur.

And I wanna show you which problem we have

with the current implementation.

If you have a look at your Developer Tools

and you go to the Elements tab, there,

you can inspect your

your list here, which is this list of div's.

We could change this to a list with list items

but for the moment, I'll stick to these div's here.

And if we now have a look at this list here

then you should watch the part here

on the right in Developer Tools

as I add a new item,

A book 2, for example,

for 39.99

if I add dat,

watch these div's on the right.

Did you see what happened?

This last item flashed.

And if our item flashes here, it means

that it was edited

or added by the browser.

Now it's strange that the last item flashed

because actually the new item was added

as the first item, the top most item in this list

to understand what's going on.

Let me expand this first item,

A book 2, which I just added.

And let me add a third item here,

like this.

Let's add this and click Add Expense

and you see

this also flashed

if not rewind and go back a couple of seconds.

And you'll see that this h2 tag of the

first item,

also flashed when I added this new item.

So what actually happens here when I add a new item

is that React, renders this new item

as the last item in this list of div's

and updates all items and replace their content,

such that it again

matches the order of the items in my Array.

And this is not great.

This is happening

because to React all these items look similar

and it only sees that my Array changed

that it's now longer than before.

And hence it simply renders an additional div

and it adds that at the end.

And then it simply walks through all the items

and updates the content inside of every item

to match the Array content again.

The final result, therefore is correct here

but from a performance perspective this is not great

because all items are visited and updated

and it can even lead to bugs.

If the expense items would be state full items

and we would have some state managed inside of that.

Then if, for example, our first item,

if it has a certain state if we add a new item

the old first item would be overwritten

with the new first item.

Hence any state changes we might've had in there

would be lost.

So besides potential performance issues

we could also run into bugs.

So that is a problem.

And the question therefore is,

why does React, behave like this?

The answer is because it has no other way.

It currently simply checks the length

of the Array and then has a look

at the number of items that were already rendered.

The individual items all look similar to React though

so it can't know where a new item should be added

or anything like that.

That's why we get this warning because we have a way

of telling react where a new item it should be added.

And we do that by going to the place

where we output our list of items.

So does map method here

and we then add a special prop to this item here.

And that's the key prop.

This is not a prop we are using instead of expense item

but instead it's a prop you can add to any component

no matter if it's a custom component by you

or if it's a built in HTML element, you can always add this.

And if you do add it, if you add the key

to your component or HTML element,

then you can

help React identify the individual items.

For dat you need to set a unique

value per list item

and dat, for example in this case here

would be the expense ID

because in our expenses Array,

every item has a unique ID.

And if you wonder what you do, if you have no unique ID

then you could use the second argument which you get here

for the function you pass to map

which is an automatically managed index

though it's discouraged to use that since with that

you can still run into bugs because the index

for a given item is always the same

and not directly attached to the content of the item.

For the ID that's different

every item with a certain content has a clear unique ID.

And in reality, it turns out that

in most scenarios you do have some unique ID

because typically you are rendering some data which comes

from a database or anything like that.

And there you work with unique IDs anyways.

So finding some unique identifier is no problem

and you can use any primitive value as a unique identifier

any number or String that can be unique identifiers.

So here I add this key,

pointing at expense ID.

And once we do that, if we reload

we no longer get that warning.

And if I now

inspect my, my list here again

and I inspect the, the title of the currently first item

if I now add a new item again,

like this

book

you will see that this h2 tag did now not flash instead

this div flashed and this div was also now added

at the beginning of the list correctly.

This div here, I mean, as it should be, because

now React is able to uniquely identify all these items

and it's therefore aware, not just how long the Array is

but also aware which items should be placed.

And it's able to update this list more efficient way.

So long story short.

You should always add such a key

when mapping out lists of items.

And I hope I could explain why that matters.

You don't need to know why it's enough if you add it.

But I think it's always important

that you also do understand what's going on

behind the scenes and why you're doing something.