What is the useDebugValue hook?

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

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)

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.