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

import { useState, useEffect, useDebugValue } from "react";
 
function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    // セッション確認の擬似コード
    checkSession()
      .then((userData) => setUser(userData))
      .finally(() => setLoading(false));
  }, []);
 
  // DevTools にログイン状態をわかりやすく表示
  useDebugValue(
    { user, loading },
    ({ user, loading }) => {
      if (loading) return "確認中...";
      if (!user) return "未ログイン";
      return `ログイン中: ${user.name} (${user.email})`;
    }
  );
 
  return { user, loading };
}

import { useState, useEffect, useDebugValue } from "react";
 
function useFetch(url) {
  const [state, setState] = useState({
    data: null,
    loading: true,
    error: null,
  });
 
  useEffect(() => {
    setState({ data: null, loading: true, error: null });
 
    fetch(url)
      .then((res) => res.json())
      .then((data) => setState({ data, loading: false, error: null }))
      .catch((error) => setState({ data: null, loading: false, error }));
  }, [url]);
 
  // フェッチの状態をわかりやすいラベルで表示
  useDebugValue(state, ({ loading, error, data }) => {
    if (loading) return `読み込み中: ${url}`;
    if (error) return `エラー: ${error.message}`;
    return `取得完了 (${Array.isArray(data) ? data.length + "件" : "オブジェクト"})`;
  });
 
  return state;
}

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

// ❌ フォーマッタに重い処理を入れてはいけない
useDebugValue(data, (d) => {
  // 重い同期処理はNG
  return JSON.stringify(d, null, 2); // 大きなデータだと重い
});
 
// ✅ 軽い処理にとどめる
useDebugValue(data, (d) => `${d?.length ?? 0}件`);