useDebugValue 完全入門【React】カスタムフックをDevToolsでデバッグする

useDebugValue(value);
useDebugValue(value, formatFn); // フォーマッタ関数あり

import { useState, useEffect, useDebugValue } from "react";
 
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
 
  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);
 
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);
 
    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
    };
  }, []);
 
  // DevTools に "Online" または "Offline" と表示される
  useDebugValue(isOnline ? "Online" : "Offline");
 
  return isOnline;
}

import { useDebugValue } from "react";
 
function useLastActivity(userId) {
  const [lastActivity, setLastActivity] = useState(null);
 
  // ... データ取得ロジック ...
 
  // フォーマッタ関数：DevTools が表示するときだけ実行される
  useDebugValue(lastActivity, (date) => {
    if (!date) return "未アクティブ";
    return date.toLocaleString("ja-JP"); // 日本語形式でフォーマット
  });
 
  return lastActivity;
}

function useFormField(initialValue) {
  const [value, setValue] = useState(initialValue);
  const [isValid, setIsValid] = useState(true);
  const [isDirty, setIsDirty] = useState(false);
 
  // オブジェクトでまとめて渡すこともできる
  useDebugValue({ value, isValid, isDirty });
 
  const handleChange = (e) => {
    setValue(e.target.value);
    setIsDirty(true);
    setIsValid(e.target.value.length > 0);
  };
 
  return { value, isValid, isDirty, onChange: handleChange };
}