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.