useDebugValue: Label Your Custom Hooks in DevTools
useDebugValue attaches a readable label to your custom hooks in React DevTools. Instead of just seeing raw state, you can display a meaningful string like "Online". The footgun is overusing it; reserve it for complex, shared library hooks.
Why it exists
Custom hooks often encapsulate complex logic and state. When debugging in React DevTools, you might see the raw state, like a boolean or an array of objects, which lacks context. useDebugValue was created to solve this by letting hook authors provide a custom, more meaningful representation of the hook's state for the debugger.
The mental model
Think of useDebugValue as a custom console.log specifically for the React DevTools UI. It doesn't affect your application's logic or rendering. Its only job is to provide a clear, human-readable label for your custom hook's state when a developer inspects it, improving the debugging experience for anyone using that hook.
How it works
You call useDebugValue(value) at the top level of your custom hook. The value you pass is what will be displayed next to your hook's name in DevTools. For performance, you can pass a second argument: a formatting function. This function, like date => date.toDateString(), will only be called when the component is actually inspected in DevTools, avoiding potentially expensive formatting work on every render. The hook itself returns nothing.
When to use it
Use it primarily in custom hooks that are part of a shared library or have complex internal state that isn't immediately obvious from its raw value. A hook managing a complex data structure, a state machine, or external subscriptions (like network status) are great candidates. It makes the library easier for other developers to use and debug.
When not to use it
Avoid using useDebugValue on every single custom hook. For simple hooks within your application code where the state is straightforward (e.g., a useToggle hook that just returns a boolean), it adds unnecessary code and noise. It provides little value if the raw state is already easy to understand.
One canonical example
A useOnlineStatus hook tracks if the user is online. Internally, it might store this as a boolean isOnline. Without useDebugValue, DevTools would show something like OnlineStatus: true. By adding useDebugValue(isOnline ? 'Online' : 'Offline'), the DevTools will instead display the much clearer label OnlineStatus: "Online" or OnlineStatus: "Offline", immediately communicating the hook's state.
Interview question
For which primary purpose is useDebugValue most effectively utilized in a custom React hook?
- a.To enhance the performance of state updates within complex custom hooks.
- b.To replace traditional console.log statements for debugging all custom hook logic.
- c.To automatically format and display the raw state of every custom hook in the DevTools for easier inspection.
- d.To display a meaningful, human-readable label for the hook's state in React DevTools, especially for complex shared library hooks.Correct
Why? this is the answer
useDebugValue's core purpose is to provide a custom, more meaningful representation of a hook's state in React DevTools, aiding debugging for complex or shared library hooks. It does not affect application logic or runtime performance; its optional formatting function only optimizes DevTools display performance.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
- #react
- #hooks
- #debugging
- #devtools
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles