useDebugValue

useDebugValue(value, format?)

useDebugValue(value, format?)

Вызывайте useDebugValue на верхнем уровне вашего custom Hook, чтобы отображать понятное значение для отладки:

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

Parameters

• value: Значение, которое вы хотите отображать в React DevTools. Оно может быть любого типа.
• optional format: Функция форматирования. Когда компонент инспектируется, React DevTools вызовет эту функцию с value в качестве аргумента, а затем отобразит возвращённое отформатированное значение (которое тоже может быть любого типа). Если вы не укажете функцию форматирования, будет отображаться само исходное value.

Returns

useDebugValue ничего не возвращает.

Usage

Добавление метки к custom Hook

Вызывайте useDebugValue на верхнем уровне вашего custom Hook, чтобы отображать понятное значение для отладки в React DevTools.

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

Это даёт компонентам, использующим useOnlineStatus, метку вроде OnlineStatus: "Online" при просмотре в инспекторе:

Без вызова useDebugValue отображались бы только базовые данные (в этом примере, true).

import { useOnlineStatus } from './useOnlineStatus.js';function StatusBar() {  const isOnline = useOnlineStatus();  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;}export default function App() {  return <StatusBar />;}

Отложенное форматирование значения отладки

Вы также можете передать функцию форматирования в качестве второго аргумента useDebugValue:

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

Ваша функция форматирования получит значение отладки в качестве параметра и должна вернуть отформатированное значение для отображения. Когда ваш компонент будет инспектироваться, React DevTools вызовет эту функцию и покажет её результат.

Это позволяет избежать выполнения потенциально дорогой логики форматирования, если компонент фактически не просматривается. Например, если date — это значение Date, это позволяет не вызывать toDateString() на каждом рендере.