Kent C. Dodds: 0:00 All right. Use debug value, this is useful only for your custom hooks, you can't really use this inside of components directly. What this is for is for the React DevTools browser extension. If you don't already have that installed, definitely get that installed for this exercise, because you're going to need it.

0:19 I give you an example of how to use this particular hook that it's pretty simple, straightforward. This is exercise is going to be a quick one for you. Feel free to take a look at the exercise and what we've implemented in our custom Hook. Basically, what we have here is a box, and we have three useMedia custom hooks usages here.

0:39 We can't see that in action here, because my screen isn't wide enough. What I'm going to do is take this one out of full screen, and then we'll be able to change the size of my screen here and there we go. We see that in action.

0:54 The problem that you're solving for this one is if you go to your components here on our box, we're going to see all of the props and the hooks and everything else that's available to us here.

1:05 Each of this media query hooks is showing us the state and the effect that they're using, but they don't give us any insight into what these are. It would be nice to get a label to know what the media query is that's powering the state and the effects here.

1:24 That's your goal for this exercise. Have a good time and I'll see you on the other side.