Label a custom hook in React DevTools.
Section: Context and Ref Hooks
useDebugValue in a custom hook
tsx
tsx
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(true);
useDebugValue(isOnline ? 'Online' : 'Offline');
return isOnline;
}Explanation
Primarily helpful in reusable hooks that appear in DevTools.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Context and Ref Hooks
useRef mutable container
Persist mutable values between renders without re-rendering.
useImperativeHandle custom ref API
Expose a controlled imperative API to a parent ref.
useId for stable accessible IDs
Generate stable IDs for labels and ARIA relationships.