React Refs और useRef Hook का उपयोग करना

React एक declarative approach का उपयोग करता है। आप state को अपडेट करते हैं, और React UI को अपडेट कर देता है। यह अधिकांश कार्यों के लिए काम करता है।

लेकिन कभी-कभी आपको Virtual DOM से बाहर निकलने की आवश्यकता होती है। आपको सीधे किसी वास्तविक HTML element को छूने (touch करने) की आवश्यकता हो सकती है। यहीं पर Refs और useRef hook काम आते हैं।

Ref क्या है? Ref एक pointer है। यह React को सीधे एक native DOM node से जोड़ता है।

useState के बजाय useRef का उपयोग क्यों करें? State अपडेट होने पर re-render ट्रिगर होता है। इसका मतलब है कि React स्क्रीन पर component को फिर से ड्रा (redraw) करता है। Ref अपडेट होने पर re-render ट्रिगर नहीं होता है। यह उन्हें उन values के लिए एकदम सही बनाता है जो बदलती तो हैं लेकिन जिन्हें तुरंत UI में दिखाने की आवश्यकता नहीं होती है।

सामान्य उपयोग के मामले (Common use cases): • किसी input field को स्वचालित रूप से focus करना। • video या audio elements को नियंत्रित करना (play/pause)। • किसी element की चौड़ाई (width) या ऊंचाई (height) मापना। • intervals या timeouts के लिए timer IDs को स्टोर करना।

useRef का उपयोग कैसे करें:

  1. React से useRef को import करें।
  2. इसे initialize करें: const myRef = useRef(null)।
  3. इसे किसी element से जोड़ें: <input ref={myRef} />।
  4. value को इस तरह एक्सेस करें: myRef.current।

उदाहरण 1: Input को auto-focus करना जब कोई उपयोगकर्ता किसी पेज पर आता है, तो आप चाहते हैं कि कर्सर टेक्स्ट बॉक्स में हो। component mount होने के बाद myRef.current.focus() को कॉल करने के लिए आप useEffect का उपयोग करते हैं।

उदाहरण 2: एक Stopwatch यदि आप setInterval ID को state में स्टोर करते हैं, तो हर बार timer टिक होने पर component re-render होता है। यह धीमा है। यदि आप ID को ref में स्टोर करते हैं, तो component तेज़ बना रहता है। value ब्राउज़र के लिए अतिरिक्त काम किए बिना renders के दौरान सुरक्षित रहती है।

State बनाम Ref: • State: Re-render ट्रिगर करता है। UI data के लिए उपयोग किया जाता है। Updates asynchronous होते हैं। • Ref: No re-render। DOM access और memory के लिए उपयोग किया जाता है। Updates synchronous होते हैं।

Seniors के लिए Pro Tips: • अत्यधिक उपयोग से बचें। Refs का उपयोग केवल तभी करें जब declarative logic विफल हो जाए। • Memory को clean करें। अपने cleanup function में हमेशा intervals या event listeners को clear करें। • Rendering के दौरान refs में न लिखें। ref.current को केवल useEffect या event handlers के अंदर ही अपडेट करें। यह side effects को रोकता है। • forwardRef का उपयोग करें। यदि आप किसी custom child component को ref पास करना चाहते हैं, तो आपको उस child को React.forwardRef में wrap करना होगा।

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde