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

समस्या

एक इनपुट फ़ील्ड की कल्पना करें जहां उपयोगकर्ता सेटिंग्स या प्राथमिकताओं को समायोजित कर सकें। प्रत्येक कीस्ट्रोक या समायोजन नई स्थिति को बचाने के लिए एक एपीआई कॉल को ट्रिगर कर सकता है। यदि कोई उपयोगकर्ता त्वरित उत्तराधिकार में कई परिवर्तन करता है, तो इससे एपीआई अनुरोधों की बाढ़ आ सकती है:

• नेटवर्क संसाधनों का अकुशल उपयोग।
• संभावित दौड़ की स्थिति।
• सर्वर पर अनावश्यक लोड।

डिबाउंसिंग दर्ज करें

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

डिबाउंसिंग का उपयोग क्यों करें?

• प्रदर्शन में सुधार: अनावश्यक एपीआई कॉल की संख्या कम करता है।
• संसाधन अनुकूलन: सर्वर लोड और नेटवर्क उपयोग को कम करता है।
• उन्नत उपयोगकर्ता अनुभव: तीव्र, क्रमिक कॉलों से अंतराल और संभावित त्रुटियों को रोकता है।

यूज़रेफ की भूमिका

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

यहां यूज़रेफ का उपयोग क्यों करें?

• संचित अद्यतन जारी रखें: हमें पुन: प्रस्तुतीकरण किए बिना रेंडरर्स के बीच संचित अद्यतनों पर नज़र रखने की आवश्यकता है।
• म्यूटेबल करंट वैल्यू तक पहुंच: useRef हमें एक .current प्रॉपर्टी देता है जिसे हम पढ़ और लिख सकते हैं।

यूज़डेबाउंस्डअपडेट हुक

आइए कोड में गहराई से उतरें और समझें कि यह सब एक साथ कैसे आता है।

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

इसे तोड़ना

1. यूज़रेफ के साथ अपडेट जमा करना

हम सभी आने वाले अपडेट के संयुक्त मापदंडों को संग्रहीत करने के लिए एक यूज़रेफ को इनिशियलाइज़ करते हैं जिसे एक्युम्युलेटअपडेट्स कहा जाता है।

स्थिरांकित अद्यतन = उपयोगRef(शून्य);

2. एपीआई कॉल को डिबाउंस करना

हम सामग्री यूआई से डिबाउंस उपयोगिता का उपयोग करके एक डिबाउंस फ़ंक्शन प्रोसेसअपडेट बनाते हैं।

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• processUpdates के लिए Ref का उपयोग क्यों करें? हम यह सुनिश्चित करने के लिए useRef का उपयोग करते हैं कि प्रत्येक रेंडर पर डिबाउंस फ़ंक्शन दोबारा नहीं बनाया जाता है, जो डिबाउंस टाइमर को रीसेट कर देगा।

3. यूज़कॉलबैक के साथ अपडेट को संभालना

हैंडलअपडेट फ़ंक्शन अपडेट जमा करने और डिबाउंस एपीआई कॉल को ट्रिगर करने के लिए जिम्मेदार है।

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• पैराम्स को मर्ज करना: सभी अपडेट कैप्चर किए गए हैं यह सुनिश्चित करने के लिए हम नए पैरामीटर्स को किसी भी मौजूदा पैरामीटर्स के साथ मर्ज करते हैं।
• ट्रिगर डिबाउंस: हर बार जब हैंडलअपडेट को कॉल किया जाता है, तो हम प्रोसेसअपडेट्स() को ट्रिगर करते हैं, लेकिन वास्तविक एपीआई कॉल डिबाउंस हो जाती है।

4. यूज़इफ़ेक्ट के साथ सफ़ाई करना

जब घटक मेमोरी लीक को रोकने के लिए अनमाउंट होता है तो हम डिबाउंस्ड फ़ंक्शन को साफ़ कर देते हैं।

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

यह काम किस प्रकार करता है

1. एक्यूम्युलेट पैरामीटर्स: प्रत्येक अपडेट किसी भी मौजूदा पैरामीटर के साथ विलय करते हुए, अपने पैरामीटर्स कोcumuledUpdates.current में जोड़ता है।
2. डेबाउंस एक्ज़ीक्यूशन: प्रोसेसअपडेट्स निष्पादित करने से पहले विलंबित मिलीसेकेंड की निष्क्रियता की प्रतीक्षा करता है।
3. एपीआई कॉल: एक बार डिबाउंस समय बीत जाने के बाद, मर्ज किए गए पैरामीटर के साथ एपीआईअपडेट को कॉल किया जाता है।
4. संचित अद्यतनों को रीसेट करें: एपीआई कॉल के बाद, हम संचितअपडेट्स.करंट को शून्य पर रीसेट करते हैं।

उपयोग उदाहरण

यहां बताया गया है कि आप इस हुक का उपयोग किसी घटक में कैसे कर सकते हैं:

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    

       handleChange("username", e.target.value)}
      />
       handleChange("notifications", e.target.checked)}
      />
    
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• उपयोगकर्ता क्रियाएं: जैसे ही उपयोगकर्ता सेटिंग्स टाइप करता है या टॉगल करता है, हैंडलचेंज कहा जाता है।
• अस्वीकृत अपडेट: परिवर्तन जमा हो जाते हैं और 500 एमएस की निष्क्रियता के बाद एपीआई को भेज दिए जाते हैं।

निष्कर्ष

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

चाबी छीनना:

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

बेझिझक इस हुक को अपनी परियोजनाओं में एकीकृत करें और इसे अपनी विशिष्ट आवश्यकताओं के अनुरूप समायोजित करें। हैप्पी कोडिंग!