React में रेफ्स के साथ काम करने के लिए useRef हुक

इस पाठ में हम रेफ्स के साथ काम करेंगे। स्पष्टता के लिए आइए useState हुक की तुलना में useRef हुक के काम को समझते हैं।

आइए एक बटन के साथ एक कंपोनेंट बनाएं:

App.jsxreturn (
  <div>
    <button>
      state click
    </button>
  </div>
);

कंपोनेंट में useState इम्पोर्ट करें:

App.jsximport { useState } from 'react';

और एक state स्टेट बनाएं:

App.jsxconst [state, setState] = useState(0);

और अब ऐसा करते हैं कि बटन पर क्लिक करने पर हमारा state 1 से बढ़ जाए। हम स्टेट का मान सीधे बटन के टेक्स्ट में दिखाएंगे:

App.jsx<button onClick={handleStateClick}>
  state click: {state}
</button>

बटन पर क्लिक को हैंडल करने के लिए फंक्शन handleStateClick लिखें:

App.jsxfunction handleStateClick() {
  setState(state + 1);
}

बटन को क्लिक करें और देखें कि कैसे स्टेट का मान बढ़ता है।

और अब आइए App कंपोनेंट बनाएं, लेकिन स्टेट का उपयोग न करके, एक रेफ का उपयोग करें।

शुरुआत के लिए, कंपोनेंट में useRef इम्पोर्ट करें:

App.jsximport { useRef } from 'react';

और एक रेफ ref बनाएं। useRef हुक अपने रिजल्ट के रूप में रेफ की एक ऑब्जेक्ट लौटाता है जिसमें एकमात्र प्रॉपर्टी current होती है, जो आगे चलकर हमारे लिए महत्वपूर्ण होगी। इसका प्रारंभिक मान 0 पर सेट करें:

App.jsxconst ref = useRef(0);

बटन पर क्लिक हैंडलर लगाएं। याद रखें, हमें ref को नहीं, बल्कि उसकी प्रॉपर्टी current को पढ़ना/बदलना चाहिए:

App.jsx<button onClick={handleRefClick}>
  ref click: {ref.current}
</button>

हमारे बटन पर क्लिक को हैंडल करने के लिए फंक्शन जोड़ें। यहाँ हम पिछले स्टेट वाले उदाहरण की तरह ही current को 1 से बढ़ाएंगे। स्टेट के विपरीत, जहाँ इसके मान को बदलने के लिए setState फंक्शन की आवश्यकता होती है, रेफ की प्रॉपर्टी के साथ हम सीधे काम करते हैं:

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
}

अब हमारे बटन को क्लिक करें। और हम क्या देखते हैं? इस पर क्लिक करने पर, जैसा कि शुरू में 0 था, वैसा ही रहता है और नहीं बदलता।

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

App.jsxfunction handleRefClick() {
  ref.current = ref.current + 1;
  console.log('ref click: ' + ref.current);
}

और अब, ब्राउज़र में कंसोल खोलकर, फिर से बटन पर क्लिक करें और सुनिश्चित करें कि मान वास्तव में प्रत्येक क्लिक पर बदल रहा है और कोई धोखा नहीं है।

अब हम देखते हैं कि स्टेट के विपरीत, रेफ के मान को बदलने से कंपोनेंट का रेंडर नहीं होता। इसलिए हम हर बार बटन के टेक्स्ट में प्रारंभिक मान 0 देखते हैं।

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