Updating the Selected Pizza

[00:00:00]
>> Brian Holt: Just to be facetious for a second, let's just introduce an artificial await here. And I can never remember how to write this off the top of my head, so I'm going to ask Copala to do it. Wait here for 10 seconds. It creates a new promise, it waits for 10 seconds, and then after 10 seconds it resolves it.

[00:00:21]
So now, if you look at this, it's going to be empty for the first 10 seconds, right? Cuz it's it got the information back, cuz it's all local host, right? So it's all instantaneous. And then after that a while, it comes back, and then it will finally set the thing to be what you need.

[00:00:40]
>> Brian Holt: Make sense?
>> Brian Holt: All right, so that is our fetch pizza, that's our effect. That's probably the most interesting part of this.
>> Brian Holt: Now just for fun, we have our pizza down here. Let's pass our selected pizza in. So we have selected pizza.name, selected pizza.description, and I think it selected pizza.image.

[00:01:24]
>> Brian Holt: See if that works. So you have pepperoni here, and notice it's changing the title and the description. We're not changing the price yet because we haven't put that part into our pizza component yet.
>> Brian Holt: There you go, kind of cool, right? So now you can see how effect and stay kind of layer on to each other to create this kind of interactivity.

[00:01:58]
>> Brian Holt: One more stupid example this, let's just do the pizza size one up there that we were talking about. Pizza. Its size here and use effect. I'm gonna pop open my dev tools here. Notice that now every time that I click this,
>> Brian Holt: I'm getting another Ajax request to the API, right?

[00:02:20]
Because it's just watching to see whenever that changes. But notice if I change this, let me trash this so you can see.
>> Brian Holt: Not doing it, right? Because we're not changing based on pizza type, we're only changing based on pizza size.
>> Brian Holt: If anything changes, give it no array, and it's going to get real mad, and notice that DDoS yourself, right?

[00:02:54]
Why am I DDoSing it myself? Cuz it's re-rendering a lot, right? But look at my API here, it's just going hog wild. Let's, my God, please stop [LAUGH]. All right, so why is it doing that? What am I doing right here? I'm changing the state, which causes a re-render, which schedules an effect, which changes the state.

[00:03:23]
Which schedules an effect, which changes the state, which schedules an effect, right?
>> Brian Holt: That's why.
>> Brian Holt: So if you find yourself doing something like that, you probably forgot an array somewhere.
>> Brian Holt: A general useful rule of thumb is, inside of your effect, you refer to a piece of state, it should probably be tracked inside of your, they call this your dependencies, right?

[00:03:53]
Your dependent state.
>> Brian Holt: So let's say I had to call pizza types with pizza size for whatever reason, then you would normally see pizza size go here. That's just kind of a useful rule of thumb. And again, you can put as many things in here as you want.

[00:04:15]
So I have this price here and I want to show the correct price from my order.jsx. So if we look here again at my response, you can see here I have the sizes. So this is saying the barbecue chicken, the smallest 1275, the medium is 1675 and the large is 2075.

[00:04:38]
And I wanna display the right price here. So what I'm gonna do is I'm gonna say, I'm just gonna display price here, like that. And then price up here, I'm gonna say price is equal to format, and I have to do this underneath selected pizza, so it has to be underneath here, sorry.

[00:05:07]
>> Brian Holt: Selected pizza.size, and then we're gonna give it the pizza size that's been selected, so right there,
>> Brian Holt: I guess I'm gonna just put that in there, and then it only gets set with the selected pizza.
>> Brian Holt: Let me make sure that's correct. Nope, I broke it, what did I do?

[00:05:41]
>> Brian Holt: Selected pizza is undefined.
>> Brian Holt: Yeah, so this is just good for us to debug. Why is selected pizza undefined? So first of all, hot module refresh with is a wonderful feature, that code gets subbed in on the fly. But that's why it was working before and it's not working now, right?

[00:06:07]
Cuz selected pizza is not real at this point, right? So if you try and set it to be something else, it's not gonna work, right? So the way I'm gonna do this is I'm gonna say loading.
>> Brian Holt: And if it's loading, I'm just gonna show loading pizza lol.

[00:06:31]
And if it's not loading, then I'm just gonna show my pizza.
>> Brian Holt: And selected pizza size. Did I misname that?
>> Brian Holt: Networked.
>> Brian Holt: Response, sizes, my bad.
>> Brian Holt: All right now, if I click Thai chicken here and then I watch the price down here, it'll move from various price to price based on what size you've selected and the pizza you've selected.

[00:07:14]
>> Brian Holt: So let's talk about the turn area that I put in there, because that's a little weird looking too. Again, anything inside of the curly braces can be a JavaScript expression of any variety. Ternaries have the benefit of being expressions, not statements. A statement is an entire line, an expression is part of a line.

[00:07:35]
So I'm saying loading, which is a Boolean, true or false. If this is true, you do the first thing. So if it's loading, show this, very lovely and descriptive loading message, crafted with love and care and run by legal. Loading pizza, and as soon as it's done being loaded, someone's loading is false, right?

[00:07:58]
Then you can show the pizza, because we have all the data there that we need.
>> Brian Holt: Make sense?
>> Brian Holt: React developers love their ternaries, you'll see them everywhere in React.