इस लेख में, हम समझेंगे कि Zustand के स्रोत कोड में useDebugValue का उपयोग कैसे किया जाता है।

useDebugValue का उपयोग useStoreWithEquality नामक फ़ंक्शन में किया जाता है। useDebugValue एक रिएक्ट हुक है जो आपको रिएक्ट 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

हमारे बारे में:

थिंक थ्रू में, हम ओपन-सोर्स परियोजनाओं से प्रेरित सर्वोत्तम प्रथाओं को सिखाने के मिशन पर हैं।

नेक्स्ट.जेएस/रिएक्ट में उन्नत वास्तुशिल्प अवधारणाओं का अभ्यास करके अपने कोडिंग कौशल को 10 गुना करें, सर्वोत्तम प्रथाओं को सीखें और उत्पादन-ग्रेड परियोजनाओं का निर्माण करें।

हम खुले स्रोत हैं - 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