useDebugValue

useDebugValue: Custom Labels in React Developer Tools

useDebugValue is a specialized debugging hook used inside Custom Hooks to display custom label information alongside custom hooks in the official React Developer Tools browser extension.

React DevTools Visual Debugging

flowchart LR
    CustomHook["useOnlineStatus() Hook"] --> DebugValue["useDebugValue(isOnline ? 'Online' : 'Offline')"]
    DebugValue --> DevTools["React DevTools Extension Inspector Window"]

Practical Code Example

import { useState, useEffect, useDebugValue } from 'react';

// Custom Hook for Browser Network Status
export function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  // Display custom debug label in React DevTools
  useDebugValue(isOnline ? 'Network Status: Connected' : 'Network Status: Disconnected');

  // Deferred formatting function (Only called when DevTools inspector is open)
  useDebugValue(isOnline, (status) => `Status: ${status ? 'ONLINE' : 'OFFLINE'}`);

  return isOnline;
}

Consuming Component

import React from 'react';
import { useOnlineStatus } from './useOnlineStatus';

export default function StatusBanner() {
  const isOnline = useOnlineStatus();

  return (
    <div className={isOnline ? 'banner-green' : 'banner-red'}>
      {isOnline ? 'Connected to Internet' : 'Offline Mode Active'}
    </div>
  );
}

Best Practices & Gotchas

• Use Only Inside Shared Custom Hooks: Do not call useDebugValue inside standard React functional components; it is designed strictly for custom hook inspection.
• Use Format Functions for Expensive Formatting: Pass a formatting function as a second argument (useDebugValue(date, d => d.toISOString())) to defer string formatting calculations until DevTools is open.

Self-Check Challenge

Add a useDebugValue label to a useAuth() custom hook displaying User: <name> when logged in and 'Guest' when logged out.