في هذه المقالة، سوف نفهم كيفية استخدام useDebugValue في الكود المصدري لـ Zustand.

يتم استخدام useDebugValue في دالة تسمى useStoreWithEquality. useDebugValue هو خطاف React يتيح لك إضافة تصنيف إلى خطاف مخصص في React DevTools.

استدعاء useDebugValue في المستوى الأعلى من الخطاف المخصص لعرض قيمة تصحيح قابلة للقراءة:

// Pulled from https://react.dev/reference/react/useDebugValue
import { useDebugValue } from 'react';

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

في Zustand، يتم استخدام useDebugValue في شريحة كائن يبدو كما يلي:

const slice = useSyncExternalStoreWithSelector(
  api.subscribe,
  api.getState,
  api.getInitialState,
  selector,
  equalityFn,
)

يتم استخدام useDebugValue أيضًا في src/react.ts

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم أفضل الممارسات المستوحاة من المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في Next.js/React، وتعلم أفضل الممارسات وبناء مشاريع على مستوى الإنتاج.

نحن مفتوح المصدر - https://github.com/thinkthroo/thinkthroo (لا تعطينا نجمة!)

قم بتعزيز مهارات فريقك من خلال دوراتنا المتقدمة المبنية على بنية قاعدة التعليمات البرمجية. تواصل معنا على [email protected] لمعرفة المزيد!

مراجع:

1. https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L51

2. https://react.dev/reference/react/useDebugValue

3. https://github.com/pmndrs/zustand/blob/0a4f9d0f71477c5ef399191acc19e25674d0d3c4/src/react.ts#L42