React में प्रदर्शन अनुकूलन हुक useCallback

इस पाठ में, हम प्रदर्शन अनुकूलन के लिए निम्नलिखित हुक useCallback पर विचार करेंगे।

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

आइए एक उदाहरण पर विस्तार से समझते हैं। सबसे पहले, एक App कंपोनेंट बनाएं और इसमें एक num स्टेट बनाएं:

App.jsxconst [num, setNum] = useState(0);

आइए हमारे पास एक बटन हो, क्लिक करने पर जिससे num 1 से बढ़ जाए, और एक पैराग्राफ, जिसमें हम num का मान प्रदर्शित करेंगे:

App.jsxreturn (
  <div>
    <button onClick={() => setNum(num + 1)}>क्लिक करें</button>
    <p>क्लिक्स: {num}</p>
  </div>
);

और अब, मान लीजिए कि हमारे App में कुछ और सूची भी प्रदर्शित होती है आइटम्स के साथ, जिसे हम दूसरे बटन को दबाकर जोड़ेंगे। इस सूची के आइटम्स को संग्रहीत करने के लिए, हम items स्टेट बनाएंगे:

App.jsxconst [items, setItems] = useState([]);

और फिर addItem फ़ंक्शन लिखेंगे उन्हें जोड़ने के लिए:

App.jsxfunction addItem() {
  setItems([...items, 'नया आइटम']);
}

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

Items.jsxfunction Items({ items, addItem }) {

  const result = items.map((item, index) => {
    return <p key={index}>{item}</p>;
  });
  
  console.log('Items रेंडर');
  
  return (
    <div>
      <h3>हमारे आइटम्स</h3>
      {result}
      <button onClick={addItem}>आइटम जोड़ें</button>
    </div>
  );
}

export default Items;

आइए Items को App कंपोनेंट के अंत में रखें और इसे items सरणी और आइटम जोड़ने के लिए addItem फ़ंक्शन पास करें:

App.jsxreturn (
  <>
    <div>
      <button onClick={() => setNum(num + 1)}>क्लिक करें</button>
      <p>क्लिक्स: {num}</p>
      <br />
    </div>
    <Items items={items} addItem={addItem} />
  </>
);

और अब बटनों पर क्लिक करें और सुनिश्चित करें कि num बढ़ रहा है और नए आइटम सूची में जोड़े जा रहे हैं। और कंसोल खोलने पर, हम देखेंगे कि हमारी सूची हर बार पुनर्प्रस्तुत हो रही है, भले ही हम उस बटन पर क्लिक कर रहे हों जो num बढ़ाती है।

अगर हमारी सूची छोटी है, तो सब कुछ ठीक है, लेकिन अगर यह माना जाता है कि यह विशाल होगी और वहाँ बहुत कुछ और है? कोई बात नहीं - आप कहेंगे, क्योंकि पिछले पाठ में हमने memo API देखा था, ताकि कंपोनेंट के अनावश्यक पुनर्प्रस्तुतीकरण से बचा जा सके।

तो चलिए हमारे Items कंपोनेंट को memo में लपेटते हैं और बस हो गया। वैसे इसे सीधे Items को एक्सपोर्ट करते समय किया जा सकता है:

Items.jsxexport default memo(Items);

memo को इम्पोर्ट करना न भूलें:

Items.jsximport { memo } from 'react';

और अब कंसोल खोलें और बटनों पर क्लिक करें। सभी प्रयास व्यर्थ! हमने कंपोनेंट को मेमोइज़ किया, लेकिन 'क्लिक करें' बटन दबाने पर Items कंपोनेंट फिर भी हर बार पुनर्प्रस्तुत हो रहा है।

बात यह है कि जब पैरेंट कंपोनेंट पुनर्प्रस्तुत होता है, तो उसके फ़ंक्शन फिर से बनाए जाते हैं - यह हमारे addItem फ़ंक्शन पर भी लागू होता है, जिसे हम Items में पास करते हैं।

ठीक इसी समय हमें useCallback हुक मदद करेगा। आइए इसे लागू करें। सबसे पहले इसे App में इम्पोर्ट करें:

App.jsximport { useCallback } from 'react';

फिर addItem फ़ंक्शन की साधारण घोषणा को फ़ंक्शन एक्सप्रेशन में बदल दें, useCallback के लिए पहले पैरामीटर के रूप में कॉलबैक के रूप में हमारा फ़ंक्शन निर्दिष्ट करें। दूसरे पैरामीटर के रूप में वर्गाकार कोष्ठक में निर्भरताएं निर्दिष्ट करें - सभी रिएक्टिव वेरिएबल्स, जो फ़ंक्शन में भाग लेते हैं, हमारे मामले में यह items सरणी है:

App.jsxconst addItem = useCallback(() => {
  setItems(() => [...items, 'नया आइटम']);
}, [items]);

तैयार! इस तरह हमने फ़ंक्शन को कैश कर लिया है। फिर से बटनों पर क्लिक करें और देखें कि अब 'क्लिक करें' बटन दबाने पर हमारा चाइल्ड कंपोनेंट नहीं पुनर्प्रस्तुत होता है।