useDebugValue.md

title	useDebugValue

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

useDebugValue(value, format?)

---

リファレンス {/reference/}

useDebugValue(value, format?) {/usedebugvalue/}

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

import { useDebugValue } from 'react';

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

さらに例を見る

引数 {/parameters/}

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

返り値 {/returns/}

useDebugValue は何も返しません。

使用法 {/usage/}

カスタムフックにラベルを追加する {/adding-a-label-to-a-custom-hook/}

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

import { useDebugValue } from 'react';

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

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

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

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

---

デバッグ値のフォーマットを遅延させる {/deferring-formatting-of-a-debug-value/}

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

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

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

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