Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Q&A: Key and styled-components" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian takes questions from students about key and styled-components. - https://github.com/btholt/complete-intro-to-react/tree/v3-8

Get Unlimited Access Now

Transcript from the "Q&A: Key and styled-components" Lesson

[00:00:00]
>> Speaker 1: And there's a few questions going back around the use of the key. I guess there's some confusion around if you don't use the index how does that,
>> Speaker 1: The index of an array versus an ID? I know you kinda covered it.
>> Brian Holt: Sure, no, I can kind of diagram it out.

[00:00:21] So if I have,
>> Brian Holt: id 0 and name Brian,
>> Brian Holt: Let's do one more. So I have, one, two, and three. And we have Marc and we have Tanner and we have Jon.
>> Brian Holt: Okay, so Sam rendering these out to a map and I have names.map and its objects and index.

[00:01:19]
>> Brian Holt: And then that returns to an h3 with key=index and object.name.
>> Brian Holt: Okay, so picture for a moment this is names, right? Names equals, oops. Don't do that.
>> Brian Holt: So right now I'm sorting based on id, right? That's what the array is sorted by. Let's say I allowed the user to sort by name eventually, so if I haven't sort by name, then really the only thing that happens is John gets to go up here, right?

[00:02:05] So now the ids are out of order. So I guess right now this is going to be output to
>> Brian Holt: Brian, Marc, Tanner, Jon, so by id, it looks like that, right? So this is going to be the first element, the second element, the third element, and the fourth element.

[00:02:31] If then I sort by name, it's going to be Brian,
>> Brian Holt: Jon, Marc, Tanner, right? So that's what it's gonna look like. So if my key is indexed, right? It's going to be comparing the previous zeroth element to the next zeroeth element. So this one's not gonna change, so it's gonna leave Brian alone.

[00:02:57] But Marc and Jon are both the first index, right? So it's going to assume that those things stayed the same because it's gonna say index1=index1, right? And it's not true, right? They changed, right? So the index is not an accurate indicator of what has changed and what's not.

[00:03:21] So the key here is that it needs to be tied to the object, right? The index is not tied to the object, cuz the object can move anywhere throughout that array depending on how we sort it, right? But if we're tying it to the id, the id travels with that particular object, right?

[00:03:36] So if Brian's here or if Jon's here or if Jon's here, right? His id is always going to be the same, right? So then when React compares those against each other, it's gonna say this object moved over here. I'm gonna take this entire DOM tree and move it over here, right?

[00:03:53] So that's how I was able to carry these throughout, right?
>> Speaker 1: Is there any reason to use key within the component?
>> Brian Holt: You actually can't, right? So React is actually going to hide key from you. So in this particular case with ShowCard. If we went and looked at the props, key is not passed through.

[00:04:13] Key is just through React. And that's the only special property.
>> Brian Holt: So no, please don't.
>> Speaker 1: Some questions with the style components.
>> Brian Holt: Sure.
>> Speaker 1: And I'm not sure if you answered these but how does it work for output devices in responsive design, like immediate queries?
>> Brian Holt: So you can do all sorts of fancy stuff within the, so like I can say,

[00:04:56]
>> Brian Holt: This stuff that works within LESS and SASS, this all works within style components as well. So add media myBreakPoint,
>> Brian Holt: All that stuff works so, stuff that you would typically expect within SASS and LESS for the most part just kind of work within styles components. And you can use the end selector as well, which is really nice.

[00:05:32]
>> Speaker 1: What if multiple components use the same css with slight variation. Is the css repeated several times.
>> Brian Holt: That's kind of up to you, sometimes it is good idea to repeat it. There is a way to share that css. I want to say there's like a style that extends.

[00:05:54] You'd have to look at the documentation. But to suffice to say, there is a way to mix it in more CSS. If you have a standard button that you want to use. One you can just make a button in another file and export it and then extend it inside of the file.

[00:06:09] There are a couple ways to solve that issue that style components takes care of. I don't remember off the top of my head or else I'd show you.
>> Speaker 1: Have you or do you recommend using style components in production?
>> Brian Holt: The answer to that question is it depends on what you're doing.

[00:06:26] If you are in a highly performance sensitive area That the actual milliseconds makes a difference, something you wanna consider.
>> Speaker 1: You're just saying that the job descriptor has the props the styles.
>> Brian Holt: It's got a props, it's got to be so with CSS right, you typically ship all the CSS in the head, and then you pass the body, and then you pass the JS, right

[00:06:53]
>> Brian Holt: If you're not gonna do server-side rendering, you have to wait for the body to be loaded, then you have to wait for the JS to be parsed. Then you have to wait for the CSS to be put onto the page, before a style search showing up. So you have a big chance for flashes of un-styled content, and There's all sorts of problematic things.

[00:07:10] There's also a runtime penalty for styles components, right? It's not free, right? There's a styles component library working in the background.
>> Speaker 1: But as we said, webpack will eventually be able to pre-compile this stuff.
>> Brian Holt: Hopefully, hopefully eventually, right?
>> Speaker 1: It's better than the stylesheet. I mean ideally And especially if this is the way of the future kind of thing.

[00:07:31]
>> Brian Holt: For sure, and with server side rendering, which I'll show you probably on the third day, it'll pre render out that style tag for you, right, because it's gonna server side render all that stuff for you. And so that style tag will be sent down with all the CSS.

[00:07:50] So you'll get all that stuff for free. So it's still pretty fast. Max, the guy that wrote it, he has a couple big websites in production that are using it.
>> Speaker 1: Can style components be used to target semantic elements instead of a div?
>> Brian Holt: Yeah, sure. I mean this could be an article, right?

[00:08:14] Or a section.
>> Speaker 1: If each page had an h1 style, would you repeating the lining in every page?
>> Brian Holt: No, no it's smart enough to pull that out into a single class.
>> Speaker 1: Are the class names generated always random Characters?
>> Brian Holt: The answer to that question is it's a hash, I'm pretty sure.

[00:08:39] So given these set of CSS properties, this hashes to this class name, and that's how they generate the class name. That was my understanding anyway.
>> Speaker 1: Which has precendence, the class on the styled component, or the component Define styles.
>> Brian Holt: It's just the normal CSS cascade, whatever that amounts to.

[00:09:00] I guess the sum of my story here was styles components, it's worth exploring, it's worth for you to try and understand what's going on. There is still pretty we are still kind of like messing around with these ideas. And some people are less thrilled than others about it.

[00:09:15] I totally accept that opinion if you're not into it, but I think it's innovation worth exploring.
>> Speaker 3: So, one of the ways that we've used TSS within the react contacts is, like you've shown you have the TSS file within the components, and then you port it, is that?

[00:09:33] Reasonable?
>> Brian Holt: Yeah.
>> Speaker 3: Still good.
>> Brian Holt: Yeah, [COUGH], I would say that one's, I don't think anyone's questioned the safety of doing that. That's totally a production-ready strategy. I'm really hesitant to say, yes, go forward with styles-components right now, as much as I think the library's amazing. I say, judge for yourself, that's what I wanna say about styles-components.

[00:09:55] There's Tradeoffs to be made there. And there are reasons to, right? I think this is a big productivity win to have it all there in one place for you. So you need to balance developer experience versus runtime complexity.