useDebugValue

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

useDebugValue(value, format?)

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

הפניה

`useDebugValue(value, format?)`

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

import { useDebugValue } from 'react';

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

עוד דוגמאות נוספות.

פרמטרים

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

מחזירה

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

שימוש

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

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

import { useDebugValue } from 'react';

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

כך קומפוננטות שקוראות ל-useOnlineStatus יקבלו תווית כמו OnlineStatus: "Online" כשבודקים אותם:

צילום מסך של React DevTools המציג את ערך ניפוי הבאגים

בלי הקריאה ל-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

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

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

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

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

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

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

PrevioususeContext

NextuseDeferredValue