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

useDebugValue(value, format?)

リファレンス

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" のようなラベルが付けられます。

A screenshot of React DevTools showing the debug value

useDebugValue の呼び出しがない場合、表示されるのは基盤となるデータ（この例では true）のみになります。

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() を呼び出すのを回避できます。

前へuseContext
次へuseDeferredValue