custom
useDebugValue
Labels a custom hook's value in React DevTools so it is easier to identify while debugging. Reach for it inside reusable custom hooks — it has no effect for end users of your component.
useDebugValue(value, format?)Parameters & Behavior
| Parameter | Purpose |
|---|---|
| value | The value or description shown next to the hook name in DevTools |
| format | Optional formatter function — only called when DevTools inspects the hook (deferred) |
| no runtime cost | In production the formatter isn't invoked unless a devtools panel is open |
| custom hooks only | Placing it in a component is legal but adds no useful info |
Examples
function useOnlineStatus() {
const online = useSyncExternalStore(subscribe, () => navigator.onLine);
useDebugValue(online ? 'Online' : 'Offline');
return online;
}DevTools shows 'OnlineStatus: Online' next to the custom hook
function useUser(id) {
const user = useContext(UserContext);
useDebugValue(user, u => u ? `${u.name} (${u.id})` : 'anon');
return user;
}Deferred formatter runs only when the hook is expanded in DevTools
function useDebouncedValue(value, ms) {
const [v, setV] = useState(value);
useEffect(() => { const id = setTimeout(() => setV(value), ms); return () => clearTimeout(id); }, [value, ms]);
useDebugValue(`${v} (${ms}ms)`);
return v;
}Custom debounce hook labeling its current value and delay
useDebugValue(items.length, n => `${n} items`);Formatter avoids building the string unless DevTools asks for it
Gotcha
The formatter must be pure — DevTools may call it any time, or not at all. Do not rely on side effects here.
Related hooks
useSyncExternalStore
Subscribes a component to an external store in a way that is safe with concurrent rendering, preventing tearing. Reach for it when writing a library or reading from a store that lives outside React (Redux, Zustand, browser APIs, custom event emitters).
useContext
Reads the current value of a React context from the nearest matching Provider above in the tree. Reach for it to share values like themes, auth, or locale without prop-drilling through every intermediate component.
useRef
Returns a mutable object whose .current property persists for the lifetime of the component without triggering re-renders on change. Reach for it to hold DOM nodes, timers, previous values, or any imperative handle that render output does not depend on.