This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Adding Unique Keys to Components" Lesson
[00:00:00]
>> Brian Holt: So keys, in order to get rid of this key problem, let's talk a little bit about how React renders. Let's imagine that I had an ability to sort these differently. Or maybe I wanna sort one time by location in a different time by breeds. Well, that would be pretty easy to do.
[00:00:24] I just write a .sort method for that before I did .map, and it would sort just fine, right? The problem is, if I render it one way, and then I tell React to re-render a different way, it sees that things have changed, but it doesn't know how things have changed.
[00:00:40] And it doesn't do that in depth of checking to figure out how it changed. So if I did that, that's the same data objects just rearranged a different way, it would destroy everything and re-render everything. Now imagine these are really deep complicated DOM objects that's really expensive, and you're gonna see jenk in your scrolling, right, which we're trying to avoid that.
[00:01:00] We're trying to be buttery smooth 120 frames per second kind of stuff. Or 60 at least. So that's where key comes in. Key is basically giving React the handles like hey, just do a quick check and if this key is the same key for here and here, don't destroy it, just move it, right?
[00:01:20] It'll actually take that DOM element and move it down. It's way faster, the browser's really good at doing that. So that's what this key is. It's some unique attribute about that object that if it moves from index 0 to index 10, it's like, this just moved there. I'll just move it there.
[00:01:36] So the key is don't use index, right? Because if that index is not tied to the object, it might move around. You need to use some unique identifier. And these pets actually have IDs so that's the easiest way to do it. What you're gonna do is you're gonna say key=pet.
[00:01:51] Something unique to that pet, right? In this case, I can guarantee that the ID is the same. But I couldn't do name, right? I could have two Fidos in there and then React would be like, well I don't know which one is which. I'm just gonna render the first one.
[00:02:04] It'll actually drop the second one. So, make sure that it's definitely unique. Sometimes, you will have things that you will know will literally never re-order and it doesn't actually matter. In that case, go ahead and put index, but that is the only case where it's okay to put index as the key.
[00:02:26]
>> Brian Holt: If you have anything unique about the particular object, just do that. And now, if you go back, we don't see this anymore. So, that's what key is. For the most part, React is really good about not making you step in for performance optimizations, that it's good about doing everything on its own.
[00:02:47] This is one of the few cases where it requires you to step in.
>> Brian Holt: Yeah?
>> Speaker 2: Is there ever a case where index is okay?
>> Brian Holt: Yeah, so if I had a group of objects that I know was never going to be re-rendered, and never was going to be re-ordered then you could use index.
[00:03:07] Even still in that case, I would implore you to, if it has a unique identifier to use that still. Just because that's how it is today doesn't mean that's how it's going to be tomorrow. It's just one more thing you don't have to worry about, right? But, if there literally is nothing unique about it, just use index.
[00:03:24] I guess that's the one case I would be okay with it, is if there's nothing unique about those items.
>> Brian Holt: But sometimes, that unique identifier will be URLs, it'll be file names. It'll be a bunch of stuff that you can guarantee is unique. Anything you can guarantee unique.