अनावश्यक खोज फ़ंक्शन कॉल के साथ सर्वर पर ओवरलोडिंग से बचें और इस तकनीक का उपयोग करके अपने ऐप के प्रदर्शन को अनुकूलित करें।

रिएक्ट में, खोज कार्यक्षमता को लागू करते समय, ऑनचेंज हैंडलर हर बार उपयोगकर्ता द्वारा इनपुट बॉक्स के अंदर टाइप करने पर खोज फ़ंक्शन को कॉल करता है। यह दृष्टिकोण प्रदर्शन समस्याओं का कारण बन सकता है, खासकर यदि एपीआई कॉल कर रहे हों या डेटाबेस से पूछताछ कर रहे हों। खोज फ़ंक्शन पर बार-बार कॉल करने से वेब सर्वर ओवरलोड हो सकता है, जिससे क्रैश या अनुत्तरदायी यूआई हो सकता है। डिबाउंसिंग से यह समस्या हल हो जाती है।

डिबाउंसिंग क्या है?

आमतौर पर, आप प्रत्येक कीस्ट्रोक पर ऑनचेंज हैंडलर फ़ंक्शन को कॉल करके रिएक्ट में खोज कार्यक्षमता को कार्यान्वित करते हैं जैसा कि नीचे दिखाया गया है:

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");


const handleSearch = () => {
console.log("Search for:", searchTerm);
 };


const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}
instagram viewer

जबकि यह काम करता है, प्रत्येक कीप्रेस पर खोज परिणामों को अपडेट करने के लिए बैकएंड पर कॉल करना महंगा हो सकता है। उदाहरण के लिए, यदि आप "वेबदेव" खोज रहे थे, तो एप्लिकेशन "डब्ल्यू", "हम", "वेब" इत्यादि मानों के साथ बैकएंड पर एक अनुरोध भेजेगा।

डिबाउंसिंग एक ऐसी तकनीक है जो किसी फ़ंक्शन के निष्पादन में तब तक देरी करके काम करती है जब तक कि विलंब अवधि समाप्त न हो जाए। डिबाउंस फ़ंक्शन हर बार उपयोगकर्ता द्वारा टाइप किए जाने पर पता लगाता है और विलंब समाप्त होने तक खोज हैंडलर पर कॉल को रोकता है। यदि उपयोगकर्ता विलंब अवधि के भीतर टाइप करना जारी रखता है, तो टाइमर रीसेट हो जाता है और रिएक्ट नए विलंब के लिए फ़ंक्शन को फिर से कॉल करता है। यह प्रक्रिया तब तक जारी रहती है जब तक उपयोगकर्ता टाइपिंग बंद नहीं कर देता।

उपयोगकर्ताओं द्वारा टाइपिंग रोकने की प्रतीक्षा करके, डिबाउंसिंग यह सुनिश्चित करती है कि आपका एप्लिकेशन केवल आवश्यक खोज अनुरोध करता है जिससे सर्वर लोड कम हो जाता है।

रिएक्ट में सर्च को कैसे डिबाउंस करें

ऐसी कई लाइब्रेरी हैं जिनका उपयोग आप डिबाउंस को लागू करने के लिए कर सकते हैं। आप जावास्क्रिप्ट का उपयोग करके इसे स्वयं प्रारंभ से लागू करना भी चुन सकते हैं सेटटाइमआउट और क्लियरटाइमआउट कार्य.

यह आलेख डिबाउंस फ़ंक्शन का उपयोग करता है लॉडैश लाइब्रेरी.

यह मानते हुए कि आपके पास एक रिएक्ट प्रोजेक्ट तैयार है, नामक एक नया घटक बनाएं खोज. यदि आपके पास कोई कार्यशील प्रोजेक्ट नहीं है, तो इसका उपयोग करके एक रिएक्ट ऐप बनाएं रिएक्ट ऐप उपयोगिता बनाएं.

में खोज घटक फ़ाइल, एक खोज इनपुट बॉक्स बनाने के लिए निम्नलिखित कोड की प्रतिलिपि बनाएँ जो प्रत्येक कीस्ट्रोक पर एक हैंडलर फ़ंक्शन को कॉल करता है।

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");


const handleSearch = () => {
console.log("Search for:", searchTerm);
 };


const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

निंदा करने के लिए हैंडलखोज फ़ंक्शन, इसे पास करें debounce लॉश से कार्य।

import debounce from"lodash.debounce";
import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");


const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const debouncedSearch = debounce(handleSearch, 1000);


const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

में debounce फ़ंक्शन, आप उस फ़ंक्शन से गुजर रहे हैं जिसे आप विलंबित करना चाहते हैं यानी हैंडलखोज फ़ंक्शन, और विलंब समय मिलीसेकंड में यानी, 500ms।

जबकि उपरोक्त कोड को कॉल में देरी होनी चाहिए हैंडलखोज जब तक उपयोगकर्ता टाइपिंग बंद नहीं कर देता, तब तक अनुरोध रिएक्ट में काम नहीं करता है। हम निम्नलिखित अनुभाग में इसका कारण बताएंगे।

डिबाउंसिंग और रीरेंडर्स

यह एप्लिकेशन नियंत्रित इनपुट का उपयोग करता है. इसका मतलब है कि राज्य मूल्य इनपुट के मूल्य को नियंत्रित करता है; जब भी कोई उपयोगकर्ता खोज फ़ील्ड में टाइप करता है तो रिएक्ट स्थिति को अपडेट करता है।

रिएक्ट में, जब कोई राज्य मान बदलता है, तो रिएक्ट घटक को पुन: प्रस्तुत करता है और उसके अंदर सभी कार्यों को निष्पादित करता है।

उपरोक्त खोज घटक में, जब घटक पुन: प्रस्तुत होता है, तो रिएक्ट डिबाउंस फ़ंक्शन निष्पादित करता है। फ़ंक्शन एक नया टाइमर बनाता है जो देरी का ट्रैक रखता है और पुराना टाइमर मेमोरी में बैठता है। जब इसका समय समाप्त हो जाता है, तो यह खोज फ़ंक्शन को सक्रिय कर देता है। इसका मतलब यह है कि खोज फ़ंक्शन कभी भी ख़राब नहीं होता है, इसमें 500ms की देरी होती है। यह चक्र प्रत्येक रेंडर पर दोहराया जाता है - फ़ंक्शन एक नया टाइमर बनाता है, पुराना टाइमर समाप्त हो जाता है और फिर यह खोज फ़ंक्शन को कॉल करता है

डिबाउंस फ़ंक्शन को काम करने के लिए, आपको इसे केवल एक बार कॉल करना होगा। आप कंपोनेंट के बाहर डिबाउंस फ़ंक्शन को कॉल करके या इसके द्वारा ऐसा कर सकते हैं संस्मरण तकनीक का उपयोग करना. इस तरह, भले ही घटक पुन: प्रस्तुत हो, रिएक्ट इसे दोबारा निष्पादित नहीं करेगा।

खोज घटक के बाहर डिबाउंस फ़ंक्शन को परिभाषित करना

चलाएं debounce के बाहर कार्य करें खोज घटक जैसा कि नीचे दिखाया गया है:

import debounce from"lodash.debounce"
const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};


const debouncedSearch = debounce(handleSearch, 500);

अब, में खोज घटक, कॉल डिबाउंस्ड सर्च और खोज शब्द में पास करें।

exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch(searchTerm);
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

विलंब अवधि समाप्त होने के बाद ही खोज फ़ंक्शन को कॉल किया जाएगा।

डिबाउंस फ़ंक्शन को याद रखना

मेमोइज़िंग का तात्पर्य किसी फ़ंक्शन के परिणामों को कैशिंग करना और जब आप फ़ंक्शन को समान तर्कों के साथ कॉल करते हैं तो उनका पुन: उपयोग करना होता है।

याद रखने के लिए debounce फ़ंक्शन, का उपयोग करें मेमो का उपयोग करें अंकुश।

import debounce from"lodash.debounce";
import { useCallback, useMemo, useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");


const handleSearch = useCallback((searchTerm) => {
console.log("Search for:", searchTerm);
 }, []);


const debouncedSearch = useMemo(() => {
return debounce(handleSearch, 500);
 }, [handleSearch]);


const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch(searchTerm);
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

ध्यान दें कि आपने इसे भी लपेट लिया है हैंडलखोज ए में कार्य करें कॉलबैक का उपयोग करें हुक यह सुनिश्चित करने के लिए कि रिएक्ट इसे केवल एक बार कॉल करता है। के बिना कॉलबैक का उपयोग करें हुक, रिएक्ट निष्पादित करेगा हैंडलखोज प्रत्येक पुन: प्रस्तुत करने के साथ कार्य की निर्भरताएँ बनाता है मेमो का उपयोग करें हुक परिवर्तन जो बदले में कॉल करेगा debounce समारोह।

अब, रिएक्ट केवल कॉल करेगा debounce कार्य करें यदि हैंडलखोज फ़ंक्शन या विलंब समय बदल जाता है।

डिबाउंस के साथ खोज को अनुकूलित करें

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

यह सर्वर पर किए गए अनुरोधों की संख्या को कम करने में मदद करता है, क्योंकि यह विलंब समाप्त होने और उपयोगकर्ता द्वारा टाइपिंग रोकने के बाद ही अनुरोध भेजता है। इस तरह, सर्वर पर बहुत अधिक अनुरोधों का बोझ नहीं पड़ता और प्रदर्शन कुशल बना रहता है।