परिचय

यूज़रेफ क्या है?

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

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

useRef हुक विशेष रूप से इसके लिए उपयोगी है:

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

यूज़रेफ हुक को समझना

useRef हुक .current संपत्ति के साथ एक ऑब्जेक्ट लौटाता है। जब आप useRef को कॉल करते हैं, तो यह आपके द्वारा तर्क के रूप में पारित किए गए मान का एक सतत संदर्भ बनाता है। यह संदर्भ लौटाए गए ऑब्जेक्ट की .current संपत्ति में संग्रहीत है।

useRef के साथ एक संदर्भ बनाना

एक संदर्भ बनाने के लिए बस प्रारंभिक मूल्य के साथ useRef को कॉल करें।

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

उपरोक्त उदाहरण में countRef प्रारंभिक मान 0 का संदर्भ है।

संदर्भ मान तक पहुँचना

संदर्भ मान तक पहुंचने के लिए बस .current संपत्ति के साथ countRef ऑब्जेक्ट को कॉल करें

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

उपर्युक्त उदाहरण में यदि आप बटन पर क्लिक करते हैं तो यह इंक्रीमेंट फ़ंक्शन को कॉल करेगा जो काउंटरेफ को बढ़ाएगा, लेकिन काउंट

काउंट: {काउंटरेफ.करंट}

पर अपडेट नहीं किया जाएगा क्योंकि यूज़रेफ को अपडेट किया जा रहा है। यूज़स्टेट जैसे पुन: प्रस्तुतीकरण का कारण न बनें।

अपेक्षित परिणाम प्राप्त करने के लिए कोड को नीचे दिए गए उदाहरण में अपडेट करें।

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

यूज़रेफ के लिए सामान्य उपयोग के मामले

DOM तत्वों तक सीधे पहुँचना और उनमें हेरफेर करना

HTML तत्वों के गुणों तक पहुंचने और उन्हें बदलने के लिए यूज़रेफ हुक का उपयोग करना संभव है

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

सतत मूल्य

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

प्रदर्शन अनुकूलन

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

सर्वोत्तम अभ्यास और विचार

• रेंडरिंग के दौरान न लिखें या रेफरी करंट न पढ़ें
• आप Ref.current संपत्ति को बदल सकते हैं
• जब आप ref.current संपत्ति बदलते हैं, तो रिएक्ट आपके घटक को दोबारा प्रस्तुत नहीं करता है
• जानकारी आपके घटक की प्रत्येक प्रतिलिपि के लिए स्थानीय है (बाहरी चर के विपरीत, जो साझा किए जाते हैं)। आप पुन: प्रस्तुत करने वालों के बीच जानकारी संग्रहीत कर सकते हैं (नियमित चर के विपरीत, जो प्रत्येक रेंडर पर रीसेट करें).
आप इसके बजाय इवेंट हैंडलर या प्रभावों से रेफरी
• पढ़ या लिख ​​सकते हैं। रेफरी के साथ डोम में हेरफेर करना
कस्टम घटक के लिए एक रेफरी पास करना।

यदि आप इस तरह अपने स्वयं के घटक के लिए एक रेफरी पास करने का प्रयास करते हैं

const इनपुटRef = useRef(null); वापसी ;

const inputRef = useRef(null);

return ;

चेतावनी: फ़ंक्शन घटकों को रेफ़र्स नहीं दिया जा सकता। इस रेफरी तक पहुँचने के प्रयास विफल हो जायेंगे। क्या आप React.forwardRef() का उपयोग करना चाहते थे?

इस समस्या को हल करने के लिए कस्टम घटक को फॉरवर्डरेफ के साथ इस प्रकार लपेटें:

const इनपुटRef = useRef(null); वापसी ;

const inputRef = useRef(null);

return ;

'प्रतिक्रिया' से आयात {forwardRef }; const MyInput = फ़ॉरवर्डRef(({ मान, onChange }, ref) => { वापस करना ( ); }); डिफ़ॉल्ट MyInput निर्यात करें;

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    
  );
});

export default MyInput;

useRef एक शक्तिशाली हुक है जिसका उपयोग मुख्य रूप से साइड इफेक्ट उपयोग के लिए किया जाता है जैसे री-रेंडर के बीच डेटा को कैश करना या DOM के तत्वों तक पहुंचना। यह प्रदर्शन अनुकूलन और रिएक्ट एप्लिकेशन में विशिष्ट कार्यक्षमता प्राप्त करने के लिए एक बेहतरीन उपकरण है।