useDebugValue

React DevTools 7,897 lists a component's Hooks in call order, labeled with their internal state: State: true tells you nothing about which of three booleans you are looking at. useDebugValue(value, format?) attaches a readable label to a custom Hook. It returns nothing and affects nothing but the inspector.

import { useDebugValue, useSyncExternalStore } from 'react';
export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

DevTools now shows OnlineStatus: "Online" next to the call — the use prefix is stripped — instead of the raw store snapshot. The optional second argument is a formatting function DevTools calls only when someone inspects the component, so an expensive conversion costs nothing in normal rendering: useDebugValue(date, d => d.toDateString()). Passing date.toDateString() directly would run every render.

Use it sparingly. React 7,897 's own advice is to reserve it for Hooks in shared libraries whose internal data is hard to read; a label on every Hook turns the inspector into noise. And it pays off only once the tooling is installed: React DevTools ships as an extension for Chrome 1 , Firefox 555 and Edge, adding the Components and Profiler tabs of React Developer Tools. Press F12, select the component, and the Hooks panel lists every Hook it called, labels included.