useDebugValue for Custom Hooks

What is it?

useDebugValue is a simple hook that adds a label to React DevTools for your custom hooks. It has no effect on your application logic.

Example

Imagine you built a useFriendStatus hook. In DevTools, it normally just says State: "Online". You can make it prettier.

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  // ... logic ...

  // Show "Online" or "Offline" next to the hook name in DevTools
  useDebugValue(isOnline ? 'Online' : 'Offline');

  return isOnline;
}

Lazy Formatting

If calculating the debug value is expensive (like parsing a date), pass a formatting function as the second argument. React will only run this function when you actually inspect the component in DevTools.

useDebugValue(date, date => date.toDateString());