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

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

अंतिम निष्पादन का समय-चिह्न पुनः-रेंडर शुरू किए बिना कई रेंडर के बीच बना रहना चाहिए, इसलिए useRef इसके लिए सही साधन है। समय-चिह्न को इस प्रकार संग्रहीत कीजिए: const lastRunTime = useRef(Date.now())। स्थिति के विपरीत, रेफ़ को अपडेट करने से पुनः-रेंडर नहीं होता, इसलिए थ्रॉटल तर्क अतिरिक्त चक्रों के बिना कुशलता से चलता है।

useThrottle(value, delay) हुक इनपुट मान का थ्रॉटल किया हुआ रूप लौटाता है। इसका अनुबंध useDebounce के समान है: कोई भी मान और मिलीसेकंड में एक विलंब स्वीकार करना तथा थ्रॉटल किया हुआ मान लौटाना। घटक इसका उपयोग उसी तरह करते हैं, इसलिए अलग-अलग समय-निर्धारण व्यवहारों के लिए यह सीधे इस्तेमाल किया जा सकने वाला विकल्प है।

अंतिम-किनारा थ्रॉटल प्रत्येक अंतराल के अंत में मान को अद्यतन करता है। नया मान आने पर, शेष अंतराल अवधि के लिए setTimeout निर्धारित करें: delay - (Date.now() - lastRunTime.current)। टाइमर चलने पर स्थिति को अद्यतन करें और नया lastRunTime दर्ज करें। सफ़ाई प्रक्रिया में पिछले टाइमर रद्द करें।

अग्रणी-किनारा थ्रॉटल पहले मान को तुरंत लागू करता है और अंतराल समाप्त होने तक बाद वाले मानों को अनदेखा करता है। जाँचें: यदि Date.now() - lastRunTime.current >= delay है, तो स्थिति को अद्यतन करें और समय दर्ज करें। अन्यथा, अद्यतन छोड़ दें। इससे पहली क्रिया पर तत्काल प्रतिक्रिया मिलती है और उसके बाद विराम अवधि रहती है।

अक्सर सर्वोत्तम उपयोगकर्ता अनुभव में दोनों का संयोजन होता है: पहली घटना पर तुरंत प्रतिक्रिया दें (अग्रणी), फिर यह सुनिश्चित करें कि अंतराल के बाद अंतिम स्थिति भी लागू हो जाए (अंतिम)। इसका अर्थ है कि उपयोगकर्ता को शुरुआत में तेज़ प्रतिक्रिया दिखाई देती है और गति रुकने के बाद अंतिम स्थिर मान हमेशा लागू हो जाता है, जिससे अंतिम स्थिति पुरानी नहीं रहती।

लंबित टाइमर ID को useRef में रखें: const timeoutRef = useRef(null)। नया टाइमर निर्धारित करने से पहले, किसी मौजूदा टाइमर को रद्द करने के लिए clearTimeout(timeoutRef.current) चलाएँ। इससे एक-दूसरे पर चढ़ने वाले कई टाइमर नहीं बनते, जो एक ही थ्रॉटल अंतराल में कई अद्यतन कर सकते थे।

घटक हटाए जाने पर किसी भी लंबित अंतिम अद्यतन को रद्द करने के लिए useEffect की सफ़ाई प्रक्रिया में clearTimeout(timeoutRef.current) चलना चाहिए। इसके बिना, घटक हटाए जाने के बाद लंबित टाइमर चल जाता है और हटाए गए घटक की स्थिति निर्धारित करने का प्रयास करता है, जिससे React की चेतावनियाँ आ सकती हैं।

मान-आधारित हुक के बजाय, आप useCallback-आधारित थ्रॉटल हुक बना सकते हैं: useThrottledCallback(fn, delay) किसी फ़ंक्शन का थ्रॉटल किया हुआ संस्करण लौटाता है। यह तब अधिक लचीला होता है जब आप जिस क्रिया को थ्रॉटल करना चाहते हैं वह प्रतिक्रियाशील मान के बजाय फ़ंक्शन कॉल हो, जैसे विश्लेषण-ट्रैकर को चलाना।

Jest परीक्षणों में समय को नियंत्रित करने के लिए jest.useFakeTimers() का उपयोग करें। 1000 मिलीसेकंड की देरी वाला थ्रॉटल बनाएँ, मान में 10 तेज़ बदलाव करें, फिर कृत्रिम समय को 500 मिलीसेकंड आगे बढ़ाएँ और जाँचें कि केवल 1 या 2 अद्यतन हुए हैं। अगले 500 मिलीसेकंड आगे बढ़ाएँ और सत्यापित करें कि अंतिम अद्यतन चलता है। इससे थ्रॉटल के व्यवहार का नियतात्मक रूप से सत्यापन होता है।

React रेंडर के दौरान स्थिति अद्यतनों को समूहों में संसाधित करता है। स्थिति अद्यतनों पर काम करने वाला थ्रॉटल इस मॉडल में सुचारु रूप से काम करता है। हालाँकि, React 18 के समवर्ती मोड में रेंडर बाधित किए जा सकते हैं। थ्रॉटल का तर्क स्वयं, जो Date.now() के माध्यम से वास्तविक घड़ी के समय पर आधारित है, React की समय-निर्धारण प्रक्रिया से प्रभावित नहीं होता।

थ्रॉटल के लिए useRef की सहायता से अंतिम निष्पादन समय को ट्रैक करना आवश्यक है। हुक अग्रणी किनारा (तत्काल), अंतिम किनारा (स्थगित), या दोनों लागू कर सकता है। टाइमर ID को हमेशा रेफ़ में रखें और सफ़ाई प्रक्रिया में उसे रद्द करें। फ़ंक्शन-आधारित उपयोग के लिए useThrottledCallback पैटर्न को प्राथमिकता दें। विश्वसनीयता के लिए कृत्रिम टाइमर के साथ परीक्षण करें।