useDebugValue — це хук React, який дає змогу додати мітку до вашого користувацького хука в React DevTools.

useDebugValue(value, format?)

Reference

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", коли ви їх інспектуєте:

Скріншот React DevTools, що показує значення для налагодження

Без виклику 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() на кожному рендері.

ПопередняuseContext
НаступнаuseDeferredValue