Complete Intro to React v4 Spread Operator & Passing Props

Transcript from the "Spread Operator & Passing Props" Lesson

[00:00:00]
>> Brian Holt: Actually, before we start into Context, let's talk about the spread operator really quick. I intentionally don't teach this very much because I think it's kind of a bad idea, and I think people abuse it too much. If I was gonna use the spread operator here inside of render, I have const obj =

[00:00:21]
>> Brian Holt: Not state, but maybe animal: "dog", and name: "Luna", right? If I wanted to pass this into results, I have kind of two choices. I can have pet = {obj} up here, right? And this would pass in, so I'd have to refer to the set inside of results as this.props.pet.name, right?

[00:00:48] That's annoying, I don't think in general that's the most useful pattern. I think a better pattern is passing everything in explicitly, of saying name={obj.name}. And animal={obj.animal}. I think that's a more useful pattern, so then I can refer to it as sys.props.name. And it makes Results API a little bit more explicit.

[00:01:20] There is a third option. Which in general, I kind of steer people away from that you can do this, dot, dot, dot, obj. What this is, this is called the spread operator. It's very similar to the spread operator that already exists in JavaScript, but it's a JSX kind of specific version of it.

[00:01:42] But what this is gonna do is, rather than having to write out animal={obj.animal}, it spreads that across the component. So now this will receive this.props.animal and this.props.name, because this is being spread across it. Does that answer your question? Yeah?
>> off screen female: Why is that bad?
>> Brian Holt: I think it's bad because it's very implicit and not explicit.

[00:02:07]
>> Brian Holt: Which is two ways of saying the same thing. [LAUGH]
>> off screen female: You can go up to object and see exactly what?
>> Brian Holt: Yeah, but what if it's coming in from props? A lot of times, what people will do is this.props like this. And it'll be the props coming into its object, and so there's multiple layers deep that you don't see where it's coming from.

[00:02:23] And the other thing is, a lot of times, you're passing in stuff that you don't want in there anyway. You're just being lazy and not wanting to type things out, so you're like, I want most of the things in here. I want some of the things in here, but I'm gonna pass everything into it, right?

[00:02:37] Does that make some sense? So here in this case, where I can look up here and see object, I would be fine with this, right? But maybe a better example of this would be if I went into results.js, and for whatever reason, I thought it was a good idea down here to say {...this.props} or this.state, or something like this.

[00:03:05] What is in props right now? I don't know, stuff that I want in pet? Maybe, [LAUGH] right? So you get into kind of these weird situations where it becomes very implicit, and you're passing things around that you don't need. All of a sudden, you have all these props you that don't necessarily have to mess around with.

[00:03:24] I think it's better to be explicit. Now, or even in this case, rather than doing everything that I did here, I could of just done {...pet}, right? That comes in with pet here.
>> Brian Holt: I still don't like this, right? I don't like this because now pet has all this weird nesting that I want.

[00:03:42] And I wanna handle that when I'm passing in, so that this pet component is now way more reusable, right? Because I just have to pass in an animal name, breed, media, location, all that kind of stuff, and it works, instead of having to finagle all this nesting and object shape to get it to work.

[00:03:59]
>> Brian Holt: So it's a double-edged sword, and not the good kind. Is there a good kind? It's a bad one, it's a bad double-edged sword. [LAUGH] Okay, the analogy is dead, but don't. I think the sum of my story is, unless it's very obvious what's coming in with the object, I would suggest that you not do it.

[00:04:21]
>> Brian Holt: In general, over my career, I've just found that I don't like implicitness, I don't like magic. I used to write a lot of Django, when I was doing Python. There's just too much magic for me to go. Django developers are amazing, if you understand how Django works.

[00:04:38] And I think we could extend this to Rails, or some of these other backends. It's amazing, if you know what's happening. But for me, as a newbie to those, I was like, there's so much magic in here, I don't know what's going on. And so I've learned as part of my trade to not rely on magic.

[00:04:54] And React is not magical, that's one of the reasons I like it.
>> Brian Holt: Okay, that was an excessively long diatribe on, [LAUGH] why not to use the spread operator. But it's good for you to know because you'll see it in code bases. But in general, I'd advise you to shy away from it.