Updating the CartContext

[00:00:00]
>> Brian Holt: So let's go make it work with order.jsx now. So we are gonna import useContext, another very fun hook from React, and we're going to import,
>> Brian Holt: { CartContext } from "./contexts";. Actually, we can just replace this part right here. So cart equals setCart, right, this part. And the only difference thing is we're gonna say useContext(CartContext);.

[00:00:37]
>> Brian Holt: And now, whatever is in this CartContext, whatever it can find above, it that is going to be passed in here.
>> Brian Holt: It's kind of a pleasant API, isn't it? You just kind of pass it in and now that's available here.
>> Brian Holt: Here's the fun part, we don't have to change anything else, everything else just works the same way, which is kind of neat.

[00:01:03]
>> Brian Holt: Okay, and now let's go use it in header as well.
>> Brian Holt: So at the top of header, we're gonna say import,
>> Brian Holt: {UseContext } from "react";, and we're gonna import our CartContext again.
>> Brian Holt: Man, I put too many tongue twisters in today's workshop. CartContext is just gonna kill me.

[00:01:38]
This is no pizza of the day. All right, here, I only need cart, right? And actually I'm not setting the cart anywhere, so I'm just gonna say const [cart] = useContext(CartContext);. Again, I'm not using the setter anywhere, so I'm not gonna pull it out. And instead of having 5 here, I'm just gonna have cart.length, right?

[00:02:06]
>> Brian Holt: Except, what's wrong with this?
>> Speaker 1: That's a string literal.
>> Brian Holt: Literally a string literal, there we go.
>> Brian Holt: Cool, so ideally, if I say Add to Cart, big double, notice that the number up here is correct, right? Please don't add a hundred things in here because the number overflows.

[00:02:33]
Even two numbers is a bit sketch. Again, the context API has gotten a lot better than it used to be. But what's hard about, again, this useContext(CartContext);,
>> Brian Holt: Let's say that this number starts going up, in fact, this is actually kind of the classic problem with hooks in general.

[00:02:52]
I'm not a Facebook user, but Facebook used to have this problem where there would be phantom notifications, right, and then you would click on it and there would be no notification there. This was a React problem, that React would have inability to track these contexts correctly. And it was a byproduct of that.

[00:03:12]
It was really annoying, and a lot of people got super annoyed by it. They've much improved this, but the problem it's all the indirection of, where does this context come from, and what is modifying it? Just by looking at header, let's say I have a bug with header and this number is always wrong, what modified the context?

[00:03:33]
It's not immediately apparent from header.
>> Brian Holt: Cuz let's say, okay, I know it's CartContext, I'm gonna oversee, I'm gonna search my code base for CartContext, and I'm gonna go look an app, and I'm gonna see where this is created. But this isn't modifying it. Where's it being modified?

[00:03:54]
Again, by looking at this, if this was totally unfamiliar code to you, you can't see it, right, you have to go through the entire code base to figure out what is modifying this. You have to eventually land on order, right? Now, with the imports, it makes it a little bit easier to be able to grep through it, right, to be able to find it, but that used to not be true, right?

[00:04:18]
It used to be really opaque of where it was coming from. But it's strange in the structuring of this app that doing something over here affects something over here. They provide for it, because that's just how websites work, right, but in terms of beautiful, clean code, it sucks.