React 19+ · Hook

useDebugValue

useDebugValue lets a custom Hook expose a readable label or value in React DevTools. An optional formatter controls how the value appears when the component is inspected.

How it works

Call useDebugValue inside a custom Hook to expose a value or readable label in React DevTools. React displays the value directly unless you provide a formatter; with one, DevTools invokes it when the component is inspected and displays its result.

Syntax

useDebugValue(value, format?)

Parameters

Name	Type	Description
`value`	`any`	The value to display in React DevTools; it can have any type.
`format`	`(value: any) => any`	Optional function that receives value and returns the formatted value displayed by React DevTools when the component is inspected.

Returns

Nothing; useDebugValue does not return a value.

Key points

It gives custom Hooks a developer-facing label in React DevTools, making their internal state easier to recognize during inspection.
Use it at the custom Hook's top level, just like other Hooks.
Its first argument is the debug value to expose, and that value can be any type.
Without a formatter, DevTools shows the first argument directly.
A formatter receives the supplied debug value and returns what DevTools should display.
The Hook has no return value; it exists only to improve custom Hook debugging.

Common mistakes

Invoke it at the custom Hook's top level, following the Rules of Hooks; do not place it inside conditions or nested functions.
A formatter may run when DevTools inspects the component, so keep formatting focused on presentation and avoid side effects.

Example: Label a custom Hook

import { useDebugValue, useState } from 'react';

function useOnlineStatus() {
  const [isOnline] = useState(true);
  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

export default function App() {
  useOnlineStatus();
  return <p>Inspect this component with React DevTools.</p>;
}

The custom Hook exposes a readable online-status label in React DevTools while returning the underlying status to its caller.

When to use it

Show a concise status label

A custom Hook exposes a boolean or enum state

Present an inspection-friendly representation

A custom Hook stores complex data

Defer presentation formatting to DevTools

Formatting is expensive or unnecessary during normal rendering

Interview questions

QWhat problem does useDebugValue solve?

useDebugValue adds a custom Hook label or value to React DevTools. It returns nothing and is intended for making custom Hook state easier to inspect.

Follow-up: How can expensive formatting be deferred? Pass a formatter as the second argument; DevTools calls it when the component is inspected rather than requiring the formatted value on every Hook call.

QWhat are useDebugValue's arguments?

The first argument is the value shown in DevTools and may have any type. If no formatter is supplied, React DevTools displays that original value.

Follow-up: What happens if the formatter returns a non-string? The returned value is still used as the formatted display value, because the documentation allows it to have any type.

QWhere should the Hook be called and what should it display?

Place useDebugValue at the top level of the custom Hook. A common pattern is to convert internal state into a concise status such as Online or Offline for inspection.

Follow-up: Should every custom Hook use it? No; use it when a meaningful developer-facing label improves inspection, rather than adding noise to simple Hooks.

React DevTools
Custom Hooks
Rules of Hooks
useState

Source: useDebugValue. Checked 2026-10-15.