React · Hooks (Comprehensive)

useDebugValue Hook

Master useDebugValue to display custom labels for custom Hooks in React DevTools for easier debugging and development experience.

Find videos you like?

Save to resource drawer for future reference!

What is useDebugValue?

DevTools labels for custom Hooks

useDebugValue displays a custom label for custom Hooks in React DevTools. It helps you understand what's happening inside your custom Hooks during development by showing meaningful debug information next to your Hook in the Components tab.

Basic Syntax

// Basic usage

useDebugValue(value);

// With formatter (lazy evaluation)

useDebugValue(value, (val) => format(val));

value:The value to display in DevTools

formatter:Optional function to format the value (lazy)

Development Only

• Shows custom labels in DevTools
• Helps identify hook state at a glance
• Improves debugging experience
• No production impact

Lazy Formatting

• Formatter runs only when DevTools open
• Optimizes performance
• Expensive formatting operations
• Production-safe

Only for Custom Hooks!

Use useDebugValue only inside custom Hooks. Don't use it in regular components - it won't show anything in DevTools!

When to Use useDebugValue

Best practices and use cases

Shared Custom Hooks

Hooks that are part of a shared library used by multiple teams

Complex State

Hooks with complex internal state that's hard to inspect

Data Formatting

When raw value needs formatting to be human-readable

💡 Pro Tip

Don't add useDebugValue to every custom Hook! Only use it when the debug info significantly improves the debugging experience.

Step-by-Step Guide

Learn useDebugValue progressively

Step 1: Create a Custom Hook

Start by creating a custom hook that manages some state or logic. This will be the foundation for adding debug values.

//Create a custom hook with state

function useOnlineStatus() {}

const [isOnline, setIsOnline] = useState(true);

const [lastChecked, setLastChecked] = useState(Date.now());

//Hook logic goes here...

return { isOnline, lastChecked };

}

Pro Tip

Custom hooks should start with "use" and can manage any combination of state, effects, and logic.

Step 2: Add useDebugValue

Add useDebugValue to display meaningful information in React DevTools. Choose a value that helps you understand the hook's state.

//Add debug value to your hook

function useOnlineStatus() {}

const [isOnline, setIsOnline] = useState(true);

// Show connection status in DevTools

useDebugValue(isOnline ? 'Online' : 'Offline');

return isOnline;

}

Pro Tip

Use simple, human-readable values. The debug value appears next to your hook name in DevTools!

Step 3: Use Formatter Function

For complex values, use a formatter function to create readable labels. The formatter runs only when DevTools is open, optimizing performance.

//Use formatter for complex values

function useUserData(userId) {}

const [user, setUser] = useState(null);

// Format user data for DevTools

useDebugValue(user, user => {}

if (!user) return 'Loading...';

return `${user.name} (${user.role})`;

});

return user;

}

Pro Tip

Formatters are lazy! They only run when DevTools is open, making them perfect for expensive operations.

Step 4: Test in DevTools

Open React DevTools to see your debug values in action. The debug label appears next to your custom hook in the Components tab.

//Complete example with DevTools display

function App() {}

const isOnline = useOnlineStatus();

return (

<div>

Status: {isOnline ? 'Online' : 'Offline'}

</div>

);

}

DevTools View

In DevTools: useOnlineStatus: "Online" or useOnlineStatus: "Offline"

Step 5: Best Practices

Follow these guidelines to make the most of useDebugValue in your custom hooks.

//DO: Use for complex shared hooks

useDebugValue(status, s => `${s.toUpperCase()} - ${Date.now()}`);

//DON'T: Use in every simple hook

useDebugValue(count); // Unnecessary for simple values

//DO: Format complex objects

useDebugValue(data, d => `${d.items.length} items`);

//DON'T: Include sensitive data

useDebugValue(user.token); // Security risk!

Golden Rule

Use useDebugValue when the debug information significantly improves the debugging experience for you or your team.

Example: Custom Hook with Debug Value

Displaying useful debug information in DevTools

useOnlineStatus with Debug Value

Shows connection status in DevTools

Frontend

function useOnlineStatus() {
  const [isOnline, setIsOnline] = React.useState(true);

  React.useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }

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

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

  // Show debug label in DevTools
  React.useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

function StatusIndicator() {
  const isOnline = useOnlineStatus();

  return (
    <div className="container">
      <h1>🌐 Connection Status</h1>

      <div className={`status ${isOnline ? 'online' : 'offline'}`}>
        <div className="icon">
          {isOnline ? '✅' : '❌'}
        </div>
        <div className="text">
          <h2>{isOnline ? 'Online' : 'Offline'}</h2>
          <p>
            {isOnline 
              ? 'Connected to the internet' 
              : 'No internet connection'}
          </p>
        </div>
      </div>

      <div className="info">
        💡 Check React DevTools to see the debug value!
      </div>

      <div className="note">
        <strong>Open DevTools:</strong> The custom hook will show 
        "Online" or "Offline" label in the Components tab
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<StatusIndicator />);

Live Preview

Loading preview...

Key Concepts

Understanding useDebugValue fundamentals

DevTools Integration

Only visible in React DevTools during development. Helps identify hook state at a glance.

Lazy Formatting

Formatter function runs only when DevTools is open, optimizing performance in production.

Zero Production Impact

Completely removed from production builds. No runtime overhead or bundle size impact.

Best Practices

Do's and Don'ts for useDebugValue

✅ Do This

Use in shared custom hooks for team debugging
Format complex values for better readability
Use formatter function for expensive operations
Display meaningful state information

❌ Avoid This

Don't use in regular components
Don't add to every custom hook unnecessarily
Don't include sensitive data in debug values
Don't rely on it for production debugging

Debugging Tool!

useDebugValue is purely for development. Use it to make custom Hooks easier to inspect in DevTools!

Previous Topic

useImperativeHandle

Customize ref exposure, imperative APIs, and parent-child component communication.

Next Topic

useId Hook

Generate unique IDs, server-side rendering compatibility, and accessibility patterns.

Ask a Question

Have a question about useDebugValue Hook? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useDebugValue Hook

Master useDebugValue to display custom labels for custom Hooks in React DevTools for easier debugging and development experience.

Find videos you like?

Save to resource drawer for future reference!

What is useDebugValue?

DevTools labels for custom Hooks

Basic Syntax

// Basic usage

useDebugValue(value);

// With formatter (lazy evaluation)

useDebugValue(value, (val) => format(val));

value:The value to display in DevTools

formatter:Optional function to format the value (lazy)

Development Only

• Shows custom labels in DevTools
• Helps identify hook state at a glance
• Improves debugging experience
• No production impact

Lazy Formatting

• Formatter runs only when DevTools open
• Optimizes performance
• Expensive formatting operations
• Production-safe

Only for Custom Hooks!

Use useDebugValue only inside custom Hooks. Don't use it in regular components - it won't show anything in DevTools!

When to Use useDebugValue

Best practices and use cases

Shared Custom Hooks

Hooks that are part of a shared library used by multiple teams

Complex State

Hooks with complex internal state that's hard to inspect

Data Formatting

When raw value needs formatting to be human-readable

💡 Pro Tip

Don't add useDebugValue to every custom Hook! Only use it when the debug info significantly improves the debugging experience.

Step-by-Step Guide

Learn useDebugValue progressively

Step 1: Create a Custom Hook

Start by creating a custom hook that manages some state or logic. This will be the foundation for adding debug values.

//Create a custom hook with state

function useOnlineStatus() {}

const [isOnline, setIsOnline] = useState(true);

const [lastChecked, setLastChecked] = useState(Date.now());

//Hook logic goes here...

return { isOnline, lastChecked };

}

Pro Tip

Custom hooks should start with "use" and can manage any combination of state, effects, and logic.

Step 2: Add useDebugValue

Add useDebugValue to display meaningful information in React DevTools. Choose a value that helps you understand the hook's state.

//Add debug value to your hook

function useOnlineStatus() {}

const [isOnline, setIsOnline] = useState(true);

// Show connection status in DevTools

useDebugValue(isOnline ? 'Online' : 'Offline');

return isOnline;

}

Pro Tip

Use simple, human-readable values. The debug value appears next to your hook name in DevTools!

Step 3: Use Formatter Function

For complex values, use a formatter function to create readable labels. The formatter runs only when DevTools is open, optimizing performance.

//Use formatter for complex values

function useUserData(userId) {}

const [user, setUser] = useState(null);

// Format user data for DevTools

useDebugValue(user, user => {}

if (!user) return 'Loading...';

return `${user.name} (${user.role})`;

});

return user;

}

Pro Tip

Formatters are lazy! They only run when DevTools is open, making them perfect for expensive operations.

Step 4: Test in DevTools

Open React DevTools to see your debug values in action. The debug label appears next to your custom hook in the Components tab.

//Complete example with DevTools display

function App() {}

const isOnline = useOnlineStatus();

return (

<div>

Status: {isOnline ? 'Online' : 'Offline'}

</div>

);

}

DevTools View

In DevTools: useOnlineStatus: "Online" or useOnlineStatus: "Offline"

Step 5: Best Practices

Follow these guidelines to make the most of useDebugValue in your custom hooks.

//DO: Use for complex shared hooks

useDebugValue(status, s => `${s.toUpperCase()} - ${Date.now()}`);

//DON'T: Use in every simple hook

useDebugValue(count); // Unnecessary for simple values

//DO: Format complex objects

useDebugValue(data, d => `${d.items.length} items`);

//DON'T: Include sensitive data

useDebugValue(user.token); // Security risk!

Golden Rule

Use useDebugValue when the debug information significantly improves the debugging experience for you or your team.

Example: Custom Hook with Debug Value

Displaying useful debug information in DevTools

useOnlineStatus with Debug Value

Shows connection status in DevTools

Frontend

function useOnlineStatus() {
  const [isOnline, setIsOnline] = React.useState(true);

  React.useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }

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

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

  // Show debug label in DevTools
  React.useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

function StatusIndicator() {
  const isOnline = useOnlineStatus();

  return (
    <div className="container">
      <h1>🌐 Connection Status</h1>

      <div className={`status ${isOnline ? 'online' : 'offline'}`}>
        <div className="icon">
          {isOnline ? '✅' : '❌'}
        </div>
        <div className="text">
          <h2>{isOnline ? 'Online' : 'Offline'}</h2>
          <p>
            {isOnline 
              ? 'Connected to the internet' 
              : 'No internet connection'}
          </p>
        </div>
      </div>

      <div className="info">
        💡 Check React DevTools to see the debug value!
      </div>

      <div className="note">
        <strong>Open DevTools:</strong> The custom hook will show 
        "Online" or "Offline" label in the Components tab
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<StatusIndicator />);

Live Preview

Loading preview...

Key Concepts

Understanding useDebugValue fundamentals

DevTools Integration

Only visible in React DevTools during development. Helps identify hook state at a glance.

Lazy Formatting

Formatter function runs only when DevTools is open, optimizing performance in production.

Zero Production Impact

Completely removed from production builds. No runtime overhead or bundle size impact.

Best Practices

Do's and Don'ts for useDebugValue

✅ Do This

Use in shared custom hooks for team debugging
Format complex values for better readability
Use formatter function for expensive operations
Display meaningful state information

❌ Avoid This

Don't use in regular components
Don't add to every custom hook unnecessarily
Don't include sensitive data in debug values
Don't rely on it for production debugging

Debugging Tool!

useDebugValue is purely for development. Use it to make custom Hooks easier to inspect in DevTools!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

useImperativeHandle

useId Hook

Building Your Learning Module...

useDebugValue Hook

Basic Syntax

Development Only

Lazy Formatting

Only for Custom Hooks!

Shared Custom Hooks

Complex State

Data Formatting

💡 Pro Tip

Step 1: Create a Custom Hook

Step 2: Add useDebugValue

Step 3: Use Formatter Function

Step 4: Test in DevTools

Step 5: Best Practices

useOnlineStatus with Debug Value

DevTools Integration

Lazy Formatting

Zero Production Impact

✅ Do This

❌ Avoid This

Debugging Tool!

useImperativeHandle

useId Hook

useDebugValue Hook

Basic Syntax

Development Only

Lazy Formatting

Only for Custom Hooks!

Shared Custom Hooks

Complex State

Data Formatting

💡 Pro Tip

Step 1: Create a Custom Hook

Step 2: Add useDebugValue

Step 3: Use Formatter Function

Step 4: Test in DevTools

Step 5: Best Practices

useOnlineStatus with Debug Value

DevTools Integration

Lazy Formatting

Zero Production Impact

✅ Do This

❌ Avoid This

Debugging Tool!