useDebugValue

useDebugValue(value, format?)

• Ссылка
  • useDebugValue(value, format?)
• Использование
  • Добавление метки к пользовательскому хуку
  • Отсрочка форматирования значения отладки

Ссылка

useDebugValue(value, format?)

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

import { useDebugValue } from 'react';

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

См. больше примеров ниже.

Параметры

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

Возвращаемое значение

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

Использование

Добавление метки к пользовательскому хуку

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

import { useDebugValue } from 'react';

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

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

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

import { useSyncExternalStore, useDebugValue } from 'react';

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

function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

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

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

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

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

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