useDebugValue

useDebugValue 是一個 React Hook，可讓您在 React 開發者工具中為自定義 Hook 新增標籤。

useDebugValue(value, format?)

參考
- useDebugValue(value, format?)
用法
- 為自定義 Hook 新增標籤
- 延遲除錯值的格式化

參考

`useDebugValue(value, format?)`

在您的自定義 Hook 的頂層呼叫 useDebugValue 以顯示易於理解的除錯值

import { useDebugValue } from 'react';

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

請參閱以下更多範例。

參數

value：您要在 React 開發者工具中顯示的值。它可以是任何類型。
選用 format：格式化函式。當元件被檢查時，React 開發者工具會以 value 作為參數呼叫格式化函式，然後顯示返回的格式化值（可以是任何類型）。如果您未指定格式化函式，則會顯示原始的 value。

回傳值

useDebugValue 不會返回任何值。

用法

為自訂 Hook 添加標籤

在您的自訂 Hook 的頂層呼叫 useDebugValue，以便在 React DevTools 中顯示可讀的除錯值。

import { useDebugValue } from 'react';

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

這讓呼叫 useOnlineStatus 的組件在您檢查它們時，會顯示像 OnlineStatus: "Online" 這樣的標籤。

A screenshot of React DevTools showing the debug value

如果沒有呼叫 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);
  };
}

注意事項

不要為每個自訂 Hook 添加除錯值。它對於共享程式庫中的一部分，且具有難以檢查的複雜內部資料結構的自訂 Hook 最有價值。

延遲除錯值的格式化

您也可以將格式化函式作為第二個參數傳遞給 useDebugValue。

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

您的格式化函式將接收除錯值作為參數，並應返回格式化的顯示值。當您的組件被檢查時，React DevTools 將呼叫此函式並顯示其結果。

這讓您可以避免在組件實際被檢查之前運行可能耗費資源的格式化邏輯。例如，如果 date 是一個日期值，這可以避免在每次渲染時都對其呼叫 toDateString()。

上一篇useContext

下一篇useDeferredValue