Check out a free preview of the full Intermediate React, v3 course:
The "useDebugValue" Lesson is part of the full, Intermediate React, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian discusses the useDebugValue hook and it's typical application by library authors for displaying a label for custom hooks in the React DevTools. This hook can be used similarly to a console.log for a custom hook to help with debugging. A student's question regarding if all callbacks should be wrapped in useMemo is also covered in this segment.

Get Unlimited Access Now

Transcript from the "useDebugValue" Lesson

>> So to useDebugValue, this is the brand new one, this is one that was not in intermediate reactive 2. And again, it's normally for authors of library, so that they can kind of tell you what their custom hooks are doing. Let's take a look at it, let's say I make a custom hook here, that's called use is raining.

[00:00:23] And, in this particular case it's going to say, randomly, half the time is going to be raining half the time it's not going to be raining. So if you look down here, do you need a coat today, the answer is yes. If I refresh this enough times, it's eventually gonna tell me no or maybe, right.

[00:00:42] So, I have this hook now here, is called user is raining and you can pretend that goes off to an API or fetches all the weather information and tells me, do you need a coat today or not, is it raining or not? So, it would be nice if I could open my dev tools and take a look at this and say like, what is this actually giving back to me?

[00:01:01] So, this is a way for authors of libraries to tell you, here's what my hook is doing for you at the moment. So if I click the React dev tools, this is like the one that you would find inside of your, like here, in your components ones here.

[00:01:18] This is like the React dev tools it's just built into code sandbox, same thing though, same code and everything. If I go down to my Debug value component here and I click on it, I know this might be a little bit small, so let's make this a bit bigger.

[00:01:32] And I click on that, so I'm in my Debug value component notice I have this hooks here. This hooks thing where it says is not raining, that's my use Debug value. This is something that I can basically put information in that's readable by the React dev tools, so I can kind of Debug what's going on inside of my custom hooks.

[00:01:53] And that's what this use Debug value is doing. Anything that you put in here is you can just say ,useDebugValue. And that's just gonna show up in there. This is gonna allow you to look at things in there. Let's just copy that one out, save it, refresh. So, like you can see is raining there.

[00:02:35] Whatever I put in that useDebugValue is just gonna be showing up there, inside of the hook there. So, whatever you need there to Debug, it's basically like a console log for your custom hook. If you have a hook that you're using everywhere in your application, like a custom hook that you made, you might put one in there that might be a good use case for you, otherwise, you may never use this one.

[00:03:00] So the question is, Should you wrap everything in use memos, like every callback that you ever have and use memo? And then, I'll talk about the second part in a second. I'm gonna say no, and I think it's a bad idea and I don't think you should do that.

[00:03:17] It's kinda going back to what I was saying before, is like you should have a problem, before you solve a problem. Because that memorization is going to sometimes cause you to not re-render when you want it to re-render and it's going to be difficult and kinda fine tuned to figure out what that is.

[00:03:34] Now you might say, I always do and I never run into a problem. Someday you're going to run into some nasty, gross problem and it's gonna take you four hours to figure out that it said, damn use memo that you put in there, right. And I don't like those kind of problems.

[00:03:48] And so, this is where I'm going back to this use memo is going to save you minimal amounts of re-renders if you're not using it in this specific use case. So, the potential of me wasting four hours trying to figure out where I use memo is going awry is just 100% not worth it to me.

[00:04:05] React in another self is a very performant library, that if you're just writing code the way that I'm showing you here, it's plenty performance. So, do not prematurely solve performance problems where you have no performance problems, or else, you're going to start having bigger problems from your performance optimizations.

[00:04:24] This is just like a general rule of thumb in coding all up, have performance problems before you solve performance problems.