useDebugValue

useDebugValue הוא React Hook שמאפשר להוסיף תווית ל-custom Hook בתוך React DevTools.

useDebugValue(value, format?)

Reference
- useDebugValue(value, format?)
שימוש
- הוספת תווית ל-custom Hook
- דחיית עיצוב של ערך דיבוג

Reference

`useDebugValue(value, format?)`

קראו ל-useDebugValue ברמה העליונה של custom Hook כדי להציג ערך דיבוג קריא:

import { useDebugValue } from 'react';

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

ראו דוגמאות נוספות בהמשך.

Parameters

value: הערך שאתם רוצים להציג ב-React DevTools. יכול להיות מכל סוג.
אופציונלי format: פונקציית עיצוב. כשבודקים את הקומפוננטה, React DevTools תקרא לפונקציית העיצוב עם value כארגומנט, ואז תציג את הערך המעוצב שהוחזר (שגם הוא יכול להיות מכל סוג). אם לא מציינים פונקציית עיצוב, יוצג הערך המקורי value.

Returns

useDebugValue לא מחזירה דבר.

שימוש

הוספת תווית ל-custom Hook

קראו ל-useDebugValue ברמה העליונה של custom Hook כדי להציג ערך דיבוג קריא עבור 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).

Fork

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

Note

אל תוסיפו ערכי דיבוג לכל custom Hook. זה הכי שימושי עבור custom Hooks שהם חלק מספריות משותפות ושיש להם מבנה נתונים פנימי מורכב שקשה לבדוק.

דחיית עיצוב של ערך דיבוג

אפשר גם להעביר פונקציית עיצוב כארגומנט שני ל-useDebugValue:

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

פונקציית העיצוב תקבל את ערך הדיבוג כפרמטר וצריכה להחזיר ערך תצוגה מעוצב. כשבודקים את הקומפוננטה, React DevTools תקרא לפונקציה הזו ותציג את התוצאה.

כך אפשר להימנע מהרצת לוגיקת עיצוב יקרה אלא אם הקומפוננטה באמת נבדקת. לדוגמה, אם date הוא ערך מסוג Date, זה מונע קריאה ל-toDateString() בכל רינדור.

PrevioususeContext

NextuseDeferredValue