useDebugValue

useDebugValue — Хук React, які дазваляе дадаць цэтлік да ўласнага хука ў React DevTools.

useDebugValue(value, format?)

Reference
- 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).

Fork

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

Note

Не дадавайце значэнні для адладкі кожнаму хуку. Гэта найбольш патрэбна для тых хукаў, якія з’яўляюцца часткай агульнай бібліятэкі і маюць складаную ўнутраную структуру даных, якую можа быць складана даследваць.

Адтэрміноўка фарматавання значэння для адладкі

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

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

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

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

PrevioususeContext NextuseDeferredValue