useDebugValue

公式ドキュメント ↗

function useOnlineStatus() {
  const [online, setOnline] = useState(true);
  useDebugValue(online ? "オンライン" : "オフライン"); // DevTools上のラベル
  return online;
}

重い変換は、見ているときだけ行う

useDebugValue(date, (d) => d.toLocaleDateString("ja-JP"));
// ↑ toLocaleDateStringの呼び出しは、DevToolsで見ているときだけ発生する

ラベルへの変換に時間がかかる場合は、第二引数に「変換する関数」を渡せる。この関数はDevToolsで実際にそのコンポーネントを覗いているときだけ呼ばれる（遅延評価）。普段のレンダーでは呼ばれないので無駄なコストがかからない。

実際の使いどころ

このフックは、ふだんのアプリ開発ではまず使わない。自分のアプリの中だけで完結する自作フックであれば省略しても実害はない。React RouterやReact Queryのような「他の人が使うために配布するフック」の作者が、利用者のデバッグ体験を良くするために使うことが多い。