Перейти к содержанию

useDebugValue

useDebugValue - это хук React, который позволяет добавить метку к пользовательскому хуку в React DevTools.

1
useDebugValue(value, format?)

Описание

useDebugValue(value, format?)

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

1
2
3
4
5
6
7
import { useDebugValue } from 'react';

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

Параметры

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

Возвращает

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

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

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

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

1
2
3
4
5
6
7
import { useDebugValue } from 'react';

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

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

Скриншот React DevTools, показывающий отладочное значение

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { useOnlineStatus } from './useOnlineStatus.js';

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
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:

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

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

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

Источник — https://react.dev/reference/react/useDebugValue

Комментарии