useDebugValue

useDebugValue は React フックであり、React DevTools でカスタムフックにラベルを追加できるようにします。

useDebugValue(value, format?)

リファレンス
- useDebugValue(value, format?)
使用法
- カスタムフックにラベルを追加する
- デバッグ値�?フォーマットを遅延させる

リファレンス

`useDebugValue(value, format?)`

カスタムフック�?トップレベルで useDebugValue を呼び出して、読みやすいデバッグ値を表示します。

import { useDebugValue } from 'react';

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

さらに例を見る

引数

value: React DevTools に表示したい値。任意�?型が使えます。
省略可能 format: フォーマッタ関数。コンポーネントがインスペクト（inspect, 調査）されると、React DevTools は value を引数としてフォーマッタ関数を呼び出し、返されたフォーマット済み�?値（任意�?型が使えます）を表示します。フォーマッタ関数を指�?�しない場合、元�? value 自体が表示されます。

返り値

useDebugValue は何も返しません。

使用法

カスタムフックにラベルを追加する

カスタムフック�?トップレベルで useDebugValue を呼び出し、React DevTools に対して読みやすいデバッグ値を表示します。

import { useDebugValue } from 'react';

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

これにより、useOnlineStatus を呼び出すコンポーネントをインスペクトすると OnlineStatus: "Online" �?ようなラベルが付きます。

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

補足

すべて�?カスタムフックにデバッグ値を追加しないでください。デバッグ値が最も有用な�?は、共有ライブラリ�?一部であり、内部�?データ構造が複雑で調査が難しいカスタムフックです。

デバッグ値�?フォーマットを遅延させる

useDebugValue �?第 2 引数としてフォーマッタ関数も渡すことができます：

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

あなた�?フォーマッタ関数は、デバッグ値を引数として受け取り、フォーマットされた表示値を返す必要があります。コンポーネントがインスペクトされると、React DevTools はこ�?関数を呼び出し、そ�?結果を表示します。

これにより、コンポーネントが�?�際にインスペクトされない限り、コストがかかる可能性があるフォーマットロジックを�?�行することを回避できます。例えば、date が Date 値�?場合、レンダー�?度に toDateString() を呼び出すことを回避できます。

PrevioususeContext NextuseDeferredValue