Keys

[00:00:00]
>> Brian Holt: Okay, let's talk about key really quick. Key is here, it seems kind of strange. Let's just delete it here for a second. Is this actually, yeah. Good for you, react, for remembering to tell me that. But it's gonna yell at you here in the console as well.

[00:00:16]
It says that each thing should have a unique key prop. You've probably seen that several times throughout the course. What is this all about? Alright, imagine you have extremely complicated components, right? And they render a bunch of images and text and stuff like that. And then the user refilters, and it just swaps two components.

[00:00:36]
What was here is now down here, and what is here is now up here. React doesn't have a concept of, what was here and what was where, and so what it's gonna do is, it's gonna tear down everything and rebuild everything from the ground up again. Sometimes that's okay, sometimes it's not okay.

[00:00:55]
What key does when you're doing these kind of map sort of things like we're doing here and there's a lot of peer components next to each other that could be rearranged. We don't rearrange these, but in theory, we could.
>> Brian Holt: What key does is saying, here is a unique thing that's tied to this object.

[00:01:16]
So, what's unique to a pizza, its ID, right? And so that way, if we swap two things, it's you had this here, and now you have it here, cuz I have this, like identifier that I can look at to see this, move from here to here. I'm just gonna swap the components, as opposed to tearing everything down and rebuilding it, right?

[00:01:34]
Does that make sense? So that's why it just yells at you constantly. Please put a key on here. It is just a habit you want to get into. I would say here is a very common misstep here. What happens if I grab the index?
>> Brian Holt: Why is this not okay?

[00:01:57]
>> Speaker 2: It's not stable.
>> Brian Holt: It's not height of the object, which I think is what you're getting at, right? So if I move pepperoni from index zero to index five, pepperoni and zero weren't associated. So it's gonna think that it's okay, five stayed in the same place. So I'm not gonna change anything and it actually did change, right?

[00:02:19]
So that's why you can't do it that way, because the index and the object are not tied to each other there's no relation between those two things. That being said, there's sometimes there's just not a key to associate with something like sometimes it just doesn't matter if it gets reorganized.

[00:02:38]
So you'll find me doing this sometimes where I just Want the linter to shut up and get out of my way, right? You can do this this way and put the index there.