Adding debug labels to hooks
Summary: Create a hook to determine the window user's window screen size and update the view based on it. Use the
useDebugValuehook so that when a component uses the hook three different times, you'll be able to differentiate them on the The React DevTools browser extension.
- Show the current size of the window (
- Checkout the RobertBroersma/bigheads package, you'll use this in this exercise!
- Generate three specific avatars, you can name it whatever you want. I named mine,
Mikong. Each specific avatar must have fixed properties but except for
- Every time the screen size changes, an avatar's
graphicshould change (randomly).
- Only one avatar should be shown for each screen width type, In my case, I show
Mithiwhen the screen size is
smallrespectively. A big screen has a width above
1000px, a small screen has a width below
700pxthe rest are medium screens.
useDebugValueused to display a label for custom hooks in React DevTools. The custom hook should take in a minimum and maximum width, and return whether the current window size satisfies the condition.
Here's the function
Here's the component calling
And finally the top level component:
From React Docs
We don’t recommend adding debug values to every custom Hook. It’s most valuable for custom Hooks that are part of shared libraries.