Q313: What is the useDebugValue hook? - React & Modern Frontend (445 Qs)

The useDebugValue hook is used to display a label for custom hooks in React DevTools. It helps developers debug custom hooks by showing meaningful information.

Syntax

useDebugValue(value);
useDebugValue(value, formatFn); // With optional formatter

Example: Custom Hook with Debug Value

jsx

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

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

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);
  };
}, []);

// Shows "OnlineStatus: Online" or "OnlineStatus: Offline" in DevTools
useDebugValue(isOnline ? 'Online' : 'Offline');

return isOnline;
}

With Formatting Function (for expensive computations)

jsx

function useUser(userId) {
const [user, setUser] = useState(null);

// The format function only runs when DevTools is open
useDebugValue(user, (user) => user ? `User: ${user.name}` : 'Loading...');

return user;
}

Note: Only use useDebugValue in custom hooks that are part of shared libraries. It's not necessary for every custom hook in application code.