Debounce के साथ असिंक्रोनस सुझाव

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

ऑटोकम्प्लीट में दो नए स्थिति चर जोड़ें: लोडिंग के दौरान घूमता संकेतक दिखाने के लिए isLoading (बूलियन), और डेटा प्राप्त करने में विफलता होने पर त्रुटि संदेश दिखाने के लिए error (स्ट्रिंग या null)। इनके माध्यम से उपयोगकर्ताओं को अतुल्यकालिक प्रक्रिया की जानकारी मिलती है, बजाय इसके कि वे सोचते रहें कि सुझाव क्यों नहीं दिखाई दे रहे हैं।

डेटा प्राप्त करने वाले useEffect में शुरुआत में setIsLoading(true) और setError(null) सेट करें। फिर fetch(url) चलाएँ, JSON को पार्स करें, setSuggestions(data) कॉल करें और अंत में finally खंड में, या सफलता और त्रुटि दोनों मार्गों के बाद, setIsLoading(false) सेट करें। प्रभाव की निर्भरता वाली सरणी में केवल debouncedInputValue होना चाहिए।

प्रभाव की शुरुआत में एक नया AbortController बनाएँ और डेटा प्राप्त करने के विकल्पों में controller.signal पास करें। सफ़ाई फ़ंक्शन में controller.abort() कॉल करें। जब उपयोगकर्ता टाइप करता है और डिबाउंस किया गया मान बदलता है, तो नया डेटा प्राप्त करना शुरू होने से पहले पिछली डेटा-प्राप्ति रद्द हो जाती है। इससे पुराने परिणाम गलत क्रम में आने से रुकते हैं।

डेटा प्राप्त करना रद्द होने पर वह DOMException नामक AbortError के साथ अस्वीकृत हो जाता है। अपने त्रुटि-पकड़ खंड में if (err.name === 'AbortError') return; जाँचकर रद्द किए गए डेटा-प्राप्ति प्रयासों को चुपचाप अनदेखा करें। केवल वास्तविक नेटवर्क त्रुटियों या ऐसी एपीआई त्रुटियों को संभालें जिन्हें उपयोगकर्ता को दिखाना आवश्यक हो।

डेटा प्राप्त करने से पहले isLoading को true और उसके पूरा होने या असफल होने के बाद false पर सेट करें। इसे हमेशा रीसेट करने के लिए finally खंड का उपयोग करें: fetch(url).then(...).catch(...).finally(() => setIsLoading(false))। finally खंड के बिना, डेटा-प्राप्ति की त्रुटि होने पर घूमता संकेतक हमेशा चलता रहेगा।

जब isLoading true हो और इनपुट में पाठ हो, तो सुझावों की सूची के बजाय बीच में घूमता संकेतक दिखाने वाला ड्रॉपडाउन प्रदर्शित करें। इससे उपयोगकर्ता को पता चलता है कि परिणाम आने वाले हैं। लोडिंग false होने और सुझाव आ जाने पर घूमते संकेतक की जगह वास्तविक सुझाव आइटम दिखाएँ।

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

खाली पाठ-श्रृंखलाओं या बहुत छोटी क्वेरियों के लिए डेटा प्राप्त करने से बचें, क्योंकि उनसे बहुत अधिक अप्रासंगिक परिणाम मिल सकते हैं। प्रभाव की शुरुआत में यह जाँच करें: if (debouncedInputValue.length < 2) { setSuggestions([]); return; }। इससे अनावश्यक एपीआई कॉल कम होते हैं और एक ही वर्ण से मिलने वाले परिणामों की बहुत लंबी सूची से बचा जा सकता है।

प्राप्त किए गए परिणामों को useRef Map में रखें: const cache = useRef(new Map())। डेटा प्राप्त करने से पहले जाँचें: if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; }। डेटा सफलतापूर्वक प्राप्त होने के बाद परिणाम को संग्रहित करें। इससे उपयोगकर्ता द्वारा पहले टाइप की जा चुकी क्वेरियों के लिए दोबारा नेटवर्क अनुरोध नहीं भेजे जाते।

विशेष रूप से ऑटोकम्प्लीट के लिए 200-300ms का डिबाउंस विलंब सबसे संतुलित विकल्प है। इससे कम विलंब (200ms से कम) तेज़ी से टाइप करने वाले उपयोगकर्ताओं के लिए बहुत अधिक अनुरोध भेजता है। इससे अधिक विलंब (400ms से अधिक) सुझावों को धीमा और अनुत्तरदायी महसूस कराता है। वास्तविक उपयोग के ऑटोकम्प्लीट कार्यान्वयनों में 250ms आम तौर पर इस्तेमाल किया जाने वाला डिफ़ॉल्ट है।

स्थिर फ़िल्टरिंग की जगह ऐसे useEffect में एपीआई से डेटा प्राप्त करें जो डिबाउंस किए गए मान पर निर्भर करता है। पुराने अनुरोधों को रद्द करने के लिए AbortController का उपयोग करें। उपयोगकर्ता को जानकारी देने के लिए isLoading और error स्थिति जोड़ें। अत्यधिक कॉल से बचने के लिए न्यूनतम वर्ण सीमा निर्धारित करें। दोहराए गए नेटवर्क अनुरोधों को छोड़ने के लिए परिणामों को रेफ़रेंस में कैश करें।