कस्टम Hook useDebounce लागू करना

useDebounce हुक एक मान और मिलीसेकंड में एक विलंब स्वीकार करता है और उस मान का डिबाउंस किया हुआ रूप लौटाता है: function useDebounce(value, delay)। लौटाया गया debouncedValue वास्तविक मान से पीछे रहता है और किसी अन्य परिवर्तन के बिना निर्धारित विलंब बीतने के बाद ही अपडेट होता है।

हुक के भीतर, एक स्थिति वाला चर घोषित कीजिए: const [debouncedValue, setDebouncedValue] = useState(value)। यह स्थिति अंतिम स्वीकृत मान रखती है। यह प्रारंभिक मान के बराबर शुरू होती है और डिबाउंस टाइमर सक्रिय होने के बाद ही अपडेट होती है। debouncedValue पढ़ने वाले घटकों को एक स्थिर, तय इनपुट दिखाई देता है।

मुख्य तर्क useEffect में रहता है: setTimeout(() => setDebouncedValue(value), delay) से टाइमर बनाइए और उसकी ID संग्रहीत कीजिए। प्रभाव हर बार value या delay बदलने पर चलता है। टाइमर अंतिम परिवर्तन के delay मिलीसेकंड बाद सक्रिय होता है और डिबाउंस की गई स्थिति को अपडेट करता है।

useEffect का सफाई फ़ंक्शन clearTimeout(timerId) कॉल करता है। जब टाइमर सक्रिय होने से पहले मान बदलता है, तो रिएक्ट सफाई चलाकर लंबित अपडेट रद्द कर देता है। इसके बाद नया टाइमर निर्धारित किया जाता है। यही वह मुख्य तंत्र है जो डिबाउंस को काम करता है: तेज़ी से होने वाले परिवर्तन टाइमर को बार-बार फिर से शुरू करते रहते हैं।

useEffect की निर्भरता सारणी में [value, delay] होना चाहिए। इनपुट मान बदलने पर प्रभाव फिर चलता है, जिससे नया टाइमर निर्धारित होता है, और विलंब बदलने पर भी प्रभाव फिर चलता है, ताकि कॉल करने वाला डिबाउंस अंतराल को गतिशील रूप से समायोजित कर सके। पुरानी क्लोज़र समस्याओं से बचने के लिए दोनों को शामिल करना आवश्यक है।

इसका उपयोग सरल है: const debouncedSearch = useDebounce(searchInput, 300)। [debouncedSearch] को निर्भरता के रूप में रखने वाला अलग useEffect एपीआई कॉल शुरू करता है। इनपुट स्थिति (searchInput) तुरंत अपडेट होती है, जिससे इनपुट तुरंत प्रतिक्रिया देता है; केवल एपीआई कॉल डिबाउंस की प्रतीक्षा करती है।

डिफ़ॉल्ट रूप से, मानक कार्यान्वयन केवल अंतिम किनारे पर चलता है। ऐसे "तुरंत" मोड के लिए, जो पहली सक्रियता पर फ़ंक्शन को कॉल करे लेकिन बाद की कॉल को डिबाउंस करे, आपको यह दर्ज करने के लिए एक रेफ़ चाहिए कि कॉल की जा चुकी है और समय-सीमा समाप्त होने के बाद उसे फिर से सेट करना होगा। यह अधिक जटिल है, लेकिन सबमिट बटन के लिए उपयोगी हो सकता है।

प्रकार-सुरक्षा के लिए हुक को जेनेरिक बनाइए: function useDebounce(value: T, delay: number): T। इससे TypeScript debouncedValue के प्रकार का अनुमान value के प्रकार से लगा सकता है। जेनेरिक पैरामीटर T आंतरिक स्थिति और लौटाए गए प्रकार में अपने-आप आगे पहुँच जाता है।

एक आम गलती useEffect से सफाई फ़ंक्शन लौटाना भूल जाना है। सफाई के बिना, हर मान परिवर्तन नया टाइमर बनाता है, लेकिन पुराने टाइमर को कभी रद्द नहीं करता। परिणामस्वरूप कई टाइमर सक्रिय होते हैं और setDebouncedValue को पुराने मानों के साथ कई बार कॉल करते हैं, जिससे डिबाउंस पूरी तरह निष्प्रभावी हो जाता है।

एक अन्य तरीका यह है कि लॉडैश का उपयोग करके डिबाउंस फ़ंक्शन को ही useRef में रखा जाए। स्थिति-आधारित तरीके के विपरीत, रेफ़-आधारित तरीका मानों के बजाय कॉलबैक फ़ंक्शन को डिबाउंस करता है। जब आपको किसी व्युत्पन्न मान की आवश्यकता हो, तब स्थिति-आधारित हुक का उपयोग कीजिए; जब किसी घटना हैंडलर को डिबाउंस करना हो, तब कॉलबैक तरीका अपनाइए।

समय-सीमा वाले कॉलबैक के भीतर कंसोल लॉग जोड़कर और तेज़ी से टाइप करते समय ब्राउज़र कंसोल देखकर सत्यापित कीजिए कि आपका हुक सही ढंग से काम करता है। आपको हर कुंजी-दबाव के लिए एक लॉग के बजाय हर "रुकने" की घटना के लिए एक लॉग दिखाई देना चाहिए। तेज़ टाइपिंग के दौरान लॉग की संख्या कुंजी-दबावों की संख्या से काफ़ी कम होनी चाहिए।

useDebounce(value, delay) हुक ऐसी डिबाउंस की गई स्थिति रखता है जो केवल delay मिलीसेकंड तक कोई गतिविधि न होने के बाद अपडेट होती है। इसका useEffect समय-सीमा निर्धारित करता है और पुराना टाइमर रद्द करने के लिए सफाई के दौरान उसे हटाता है। एपीआई से डेटा लाने वाले प्रभावों की निर्भरता के रूप में डिबाउंस किए गए मान का उपयोग कीजिए। पूरी प्रकार-सुरक्षा के लिए TypeScript जेनेरिक जोड़िए।