व्यावहारिक उपयोग: खोज, स्क्रॉल, आकार बदलना

लाइव खोज घटक में दो अलग-अलग स्थिति चर बनाए रखिए: inputValue कच्चे इनपुट के लिए (यह हर कुंजी-दबाने पर अपडेट होता है और इनपुट फ़ील्ड को प्रतिक्रियाशील रखता है) और debouncedQuery, जो useDebounce(inputValue, 300) से मिलता है (यह टाइप करना रुकने के 300ms बाद अपडेट होता है और एपीआई कॉल शुरू करता है)। यह विभाजन अत्यधिक अनुरोधों के बिना तुरंत दृश्य प्रतिक्रिया देता है।

उपयोगकर्ता के टाइप करना शुरू करते ही लोडिंग स्पिनर दिखाइए, केवल एपीआई कॉल शुरू होने पर नहीं। जब भी inputValue !== debouncedQuery हो, isLoading: true सेट कीजिए — डिबाउंस लंबित रहने तक ये दोनों असंगत होते हैं। क्वेरी स्थिर हो जाए और डेटा-प्राप्ति पूरी हो जाए, तो इसे वापस असत्य पर सेट कीजिए। इससे उपयोगकर्ताओं को पूरे समय प्रतिक्रियाशील लोडिंग संकेतक दिखाई देता है।

पैरालैक्स प्रभाव या पठन-प्रगति पट्टी स्क्रॉल स्थिति के आधार पर अपडेट होती है। 16ms की देरी का उपयोग करके स्क्रॉल हैंडलर को अधिकतम 60fps तक थ्रॉटल कीजिए: const throttledScrollY = useThrottle(scrollY, 16)। हर स्क्रॉल पिक्सेल पर स्थिति की पुनर्गणना करने की लागत के बिना यूआई सुचारु रूप से अपडेट होता है।

लेआउट की पुनर्गणना के लिए विंडो के आकार में बदलाव को सुनना थ्रॉटल करने के बजाय डिबाउंस करना बेहतर है। लेआउट गणना को उपयोगकर्ता द्वारा आकार बदलना पूरा करने के बाद केवल एक बार चलने की आवश्यकता होती है। विंडो के आयामों पर 200ms का डिबाउंस उपयोग कीजिए। आकार बदलते समय यूआई एक सरल स्थिति दिखा सकता है; पुनर्गणित लेआउट आकार बदलना रुकने पर दिखाई देगा।

जब debouncedQuery बदलता है, तो नया AbortController बनाइए और उसका signal fetch(url, { signal }) को दीजिए। ऐसी सफ़ाई फ़ंक्शन लौटाइए जो controller.abort() कॉल करे। इससे नई डिबाउंस की गई क्वेरी आने पर पिछली क्वेरी का जारी अनुरोध रद्द हो जाता है और ऐसी दौड़ की स्थितियाँ रोकी जाती हैं जिनमें धीमी पुरानी प्रतिक्रिया तेज़ नई प्रतिक्रिया को अधिलेखित कर देती है।

AbortController के बिना, यदि उपयोगकर्ता "re" टाइप करके प्रतीक्षा करे और फिर "react" टाइप करे, तो दूसरी क्वेरी पहली से पहले लौट सकती है (कैशिंग के कारण)। खोज परिणाम कुछ समय के लिए रिएक्ट के परिणाम दिखाएँगे और फिर पुराने "re" परिणामों से अधिलेखित हो जाएँगे। AbortController पहले अनुरोध को पूरी तरह रद्द करके इसे रोकता है।

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

एसिंक्रोनस फ़ॉर्म सत्यापन, जैसे यह जाँचना कि कोई ईमेल पहले से मौजूद है या नहीं, डिबाउंस किया जाना चाहिए, ताकि हर कुंजी-दबाने पर सर्वर पर अत्यधिक अनुरोध न भेजे जाएँ। फ़ील्ड मान पर 400ms का डिबाउंस उपयोग कीजिए और डिबाउंस किए गए मान पर निर्भर useEffect में सत्यापन अनुरोध भेजिए। सत्यापन लंबित रहने तक फ़ील्ड में स्पिनर दिखाइए।

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

विलंब के मान उपयोगकर्ता अनुभव से जुड़े निर्णय होते हैं। खोज के लिए 200-300ms प्रतिक्रियाशीलता और कम अनुरोधों के बीच संतुलन बनाता है। आकार बदलने के लिए 150-200ms स्वीकार्य है, क्योंकि उपयोगकर्ता अपेक्षा करते हैं कि आकार बदलने के बाद लेआउट स्थिर हो जाए। स्वचालित सहेजने के लिए 1000ms उपयोगकर्ता को सहेजने से पहले एक वाक्य टाइप करने का समय देता है। अपेक्षित सहभागिता गति के आधार पर इसे समायोजित कीजिए।

वास्तविक ऐप्लिकेशन में अक्सर एक साथ कई अनुकूलनों की आवश्यकता होती है। कोई दस्तावेज़ संपादक स्वचालित सहेजने को डिबाउंस (1s) कर सकता है, शब्द-संख्या गणना को थ्रॉटल (500ms) कर सकता है और विश्लेषण के लिए IntersectionObserver का उपयोग कर सकता है। ये तकनीकें अच्छी तरह साथ काम करती हैं, क्योंकि प्रत्येक अपने अलग टाइमर और दायरे पर स्वतंत्र रूप से काम करती है।

खोज इनपुट, आकार बदलने वाले हैंडलर और फ़ॉर्म के स्वचालित सहेजने के लिए useDebounce का उपयोग कीजिए। स्क्रॉल और माउस की गति के लिए useThrottle का उपयोग कीजिए। दौड़ की स्थितियाँ रोकने के लिए डिबाउंस की गई एपीआई कॉल को हमेशा AbortController के साथ संयोजित कीजिए। यूआई को प्रतिक्रियाशील और जानकारीपूर्ण बनाए रखने के लिए जब भी inputValue !== debouncedQuery हो, लोड होने की स्थिति दिखाइए।