useDebugValue

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

useDebugValue(value, format?)

Довідник

`useDebugValue(value, format?)`

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

import { useDebugValue } from 'react';

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

Дивіться більше прикладів нижче.

Параметри

value: Значення, яке ви хочете відобразити в React DevTools. Воно може мати будь-який тип.
опціонально format: Функція форматування. Коли компонент буде перевірено, React DevTools викличе функцію форматування з value в якості аргументу, а потім відобразить повернуте відформатоване значення (яке може мати будь-який тип). Якщо ви не вкажете функцію форматування, буде показано оригінальне значення.

Повернення

useDebugValue не повертає нічого.

Використання

Додавання мітки до користувацького хука

Викличте useDebugValue на верхньому рівні вашого користувацького хука , щоб вивести читабельне значення, яке можна налагодити </CodeStep> для <a href="/learn/react-developer-tools">React DevTools.</a></p> <pre><code data-meta="[[1, 5, "isOnline ? 'Online' : 'Offline'"]]" class="language-js">import { useDebugValue } from 'react'; функція useOnlineStatus() { // ... useDebugValue(isOnline ? 'Online' : 'Offline'); // ... }

Це дає компонентам, що викликають useOnlineStatus мітку на кшталт OnlineStatus: "Online" при їх огляді:

A screenshot of React DevTools showing the debug value

Без виклику useDebugValue буде показано лише базові дані (у цьому прикладі true).

import { useOnlineStatus } from './useOnlineStatus.js';

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

export default function App() {
  return <StatusBar />;
}

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());

Ваша функція форматування отримає налагоджувальне значення </CodeStep> як параметр і має повертати <CodeStep data-step="2">відформатоване значення відображення</CodeStep> . Коли ваш компонент буде перевірено, React DevTools викличе цю функцію і відобразить її результат.</p> <p>Це дозволяє уникнути запуску потенційно складної логіки форматування, якщо компонент насправді не перевіряється. Наприклад, якщо <code>date є значенням типу Date, це дозволяє уникнути виклику toDateString() для нього при кожному рендерингу.

[email protected]