Refactoring the Layout

[00:00:00]
>> Brian Holt: So I've had a broken layout here for a little bit. If you've been following along, the layout actually probably was correct, but I messed some of my divs up. So let's just go ahead and fix where some of these actually ended up going. So one, the order of pizza is actually supposed to be inside of this, as is the price.

[00:00:20]
So we'll just move both of these inside of the if statement. That's good. And then I think down here at the bottom, I'm closing the div down here. That's not actually where it gets closed. This should be closed right before the Submit button, I think.
>> Brian Holt: Yeah, it's supposed to be closed here.

[00:00:50]
>> Brian Holt: And that should bring you more to something like this. I imagine this is what most of you have been seeing for a while. And the last thing that I did break, if you go to App.jsx, and you just give this h1 a class name of logo, you should get a nice Padre Gino's.

[00:01:08]
One more kind of fun thing that we can do with hooks here and use PizzaOfTheDay, we're gonna use one more hook here called useDebugValue. I'll be honest, sparingly use this, but I'm gonna show you cuz it can be useful, particularly if you have a large codebase and you're maintaining a set of hooks that a bunch of developers use.

[00:01:28]
Let's say that we wanna be able to see at a glance in the React DevTools, what the value of our hook is, because it's not immediately visible in the component view. You can kind of give it hints. So that's what we're gonna do here. So we're gonna say useDebugValue.

[00:01:46]
And if we have a PizzaOfTheDay, then we're just gonna say something like this. I'm gonna use a template string of,
>> Brian Holt: pizzaOfTheDay.name. You can put whatever else here that you want to, like maybe,
>> Brian Holt: I don't know
>> Brian Holt: Description. We'll put description. I don't know what else here you would ever wanna see.

[00:02:17]
Or maybe let's do id. That's a good one. Let's do name here, we'll do id first, and then we'll just put a colon between them. And then you need a ternary there.
>> Brian Holt: And if nothing's there, then you just wanna display loading, right?
>> Brian Holt: So it doesn't return anything, this is purely for developments.

[00:02:44]
This is purely for the DevTools.
>> Brian Holt: When this is in production mode, this won't get logged out, I don't think.
>> Brian Holt: So now, if we look in the React DevTools and our components, and I look at my PizzaOfTheDay, you can see here,
>> Brian Holt: Tells me my hooks. And notice this nice-looking string next to it.

[00:03:11]
This is the debug value
>> Brian Holt: Which is kinda nice, right? So imagine if you have 30 custom hooks in there. It has nice values for your,
>> Brian Holt: For your custom hooks there. I think you can only use debug value once. I think if I try and use it again, it just doesn't do anything, or maybe it overwrites it.

[00:03:42]
>> Brian Holt: No, it actually does give you an array of things.
>> Brian Holt: Interesting, didn't used to do that.
>> Brian Holt: Kinda useful.
>> Brian Holt: And there's nothing to stop you from just fully, just throwing the whole thing on there, right? You don't necessarily need to do that because it will be inside of your hook, right?

[00:04:04]
So mostly, it's just something that you wanna be able to tell at a glance the difference between all of them. In reality, if this really was me, I probably would just put the id,
>> Brian Holt: Cuz this is very readable at a glance, right, the green garden ID, right?

[00:04:28]
>> Brian Holt: So that is specifically the very niche use case for useDebugValue, is for custom hooks, identifying them at a glance.