React useDebugValue Hook Cheat Sheet

What is `useDebugValue`?

A React Hook used to label and display custom hook values in React DevTools.

import { useDebugValue } from "react";

When to Use It

Only in custom hooks — helps you see internal values when debugging.

Basic Syntax

useDebugValue(value);

With Formatter

useDebugValue(value, (val) => `Formatted: ${val}`);

Example: Custom Hook

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

  useDebugValue(isOnline ? "Online" : "Offline");

  // Fake logic for example
  return isOnline;
}

In React DevTools, you'll see:

⚛️ useOnlineStatus: "Online"

Advanced Example with Formatter

function useCounter() {
  const [count, setCount] = useState(0);
  useDebugValue(count, (c) => `Count: ${c}`);
  return [count, setCount];
}