Intermediate React, v4 useDebugValue & useId

[00:00:00]
>> Last hook which was new in React 17 is, use the bug value, which we did talk about for a hot second in complete intro to React. So here, well, first, I'll show you this, we have this use debug value example here and it's gonna say, do you need a coat today, and the answer is either yes or maybe.

[00:00:26] And if I look at my react dev tools, which again, this is built into code sandbox here but this is the same dev tools that you might download from Chrome and I click here on debug value component If it loads, Try refreshing it again. There we go. So notice this part where it says, is not ringing.

[00:01:04] Basically what you use this debug value here, is so that in your dev tools you can expose a custom debugging value for your custom hooks. So debugging custom hooks that's what you use debug value for, if you're not in a custom hook don't use this even if you are doing the custom hooks.

[00:01:29] Again, I'm gonna say this is typically for library authors and or like a design system sort of situation typically, you can just look in your own custom hook and figure out what's going on. This is more useful for like, hey, I know someone that's not me is going to later use this custom hook and they might need some internal debugging value that they can't introspect themselves.

[00:01:52] I'm going to use, use debug value to surface something that's interesting to them right? So this particular case, do you need a coat today, it's just doing math not random, and if it's raining it says yes, and if it's raining, it says maybe and the debug value here is I'm trying to surface what is, is raining, because that's not immediately obvious from looking at the code.

[00:02:16] So today it says that it is not raining so therefore it says maybe here, but if I refresh that, it might say something different, so today it is raining, so therefore it says yes there. So again, if you're making your own custom hooks, you can typically just mess with your own custom hooks and do your console logs and all that kinda stuff.

[00:02:39] It's that if your packaging you custom hooks, and giving it to someone else and you need to give them some debugging information, that's when you would use, use debug value, that's it. That is all the hooks in React 17 that are built into React itself everything else you can just kind of combine and all the various different hooks together to get the interesting functionality that you need.

[00:02:58] There are more hooks coming in React 18, the most useful that I think we might use this one called use ID, which will generate like a GUID for you, so that you can use that for keys, right? That'll be kind of useful, it'll be really useful for hydrating, so you'll generate something on the server and then you'll have your react bootstrap and you can guarantee that the ID on both sides is gonna be the same.

[00:03:21] That's where user IDs can be helpful, they have some other ones coming that they're talking about but they haven't settled what they're going to do with them yet? So we'll talk about that in React, Intermediate React 55, whenever that happens.