React Refs आणि useRef Hook चा वापर करणे

React एक declarative दृष्टिकोन वापरते. तुम्ही state अपडेट करता आणि React UI अपडेट करते. हे बहुतेक कामांसाठी उपयुक्त ठरते.

पण कधीकधी तुम्हाला Virtual DOM च्या बाहेर पडण्याची गरज पडते. तुम्हाला थेट एखाद्या खऱ्या HTML element ला स्पर्श करण्याची (manipulate करण्याची) गरज पडू शकते. इथेच Refs आणि useRef hook कामाला येतात.

Ref म्हणजे काय? Ref म्हणजे एक pointer आहे. ते React ला थेट native DOM node शी जोडते.

useState ऐवजी useRef का वापरावे? State अपडेटमुळे re-render ट्रिगर होते. याचा अर्थ React स्क्रीनवर component पुन्हा काढते (redraw करते). Ref अपडेटमुळे re-render होत नाही. त्यामुळे ज्या व्हॅल्यूज बदलतात पण ज्यांना त्वरित UI मध्ये दाखवण्याची गरज नसते, त्यांच्यासाठी Ref एकदम योग्य आहे.

सामान्य वापराची उदाहरणे (Common use cases): • इनपुट फील्डवर आपोआप फोकस करणे. • व्हिडिओ किंवा ऑडिओ एलिमेंट्स नियंत्रित करणे (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. myRef.current द्वारे व्हॅल्यू मिळवा.

उदाहरण १: इनपुटवर ऑटो-फोकस करणे जेव्हा वापरकर्ता पेजवर येतो, तेव्हा तुम्हाला कर्सर टेक्स्ट बॉक्समध्ये हवा असतो. component mount झाल्यानंतर myRef.current.focus() कॉल करण्यासाठी तुम्ही useEffect वापरता.

उदाहरण २: स्टॉपवॉच (Stopwatch) जर तुम्ही setInterval ID state मध्ये साठवला, तर प्रत्येक वेळी टायमर टिक (tick) होताना component re-render होईल. यामुळे वेग कमी होतो. जर तुम्ही ID एका ref मध्ये साठवला, तर component वेगवान राहते. ब्राउझरवर अतिरिक्त ताण न आणता ही व्हॅल्यू प्रत्येक render मध्ये सुरक्षित राहते.

State विरुद्ध Ref: • State: re-render ट्रिगर करते. UI डेटासाठी वापरले जाते. अपडेट्स asynchronous असतात. • Ref: re-render होत नाही. DOM access आणि मेमरीसाठी वापरले जाते. अपडेट्स synchronous असतात.

सिनियर्ससाठी प्रो टिप्स (Pro Tips): • अतिवापर टाळा. जेव्हा declarative logic अपयशी ठरते, तेव्हाच refs वापरा. • मेमरी क्लीन अप करा. तुमच्या cleanup function मध्ये नेहमी intervals किंवा event listeners clear करा. • rendering दरम्यान refs मध्ये काहीही लिहू नका. फक्त useEffect किंवा event handlers च्या आत ref.current अपडेट करा. यामुळे side effects टाळता येतात. • forwardRef वापरा. जर तुम्हाला एखाद्या custom child component ला ref पास करायचा असेल, तर तुम्हाला त्या child component ला React.forwardRef मध्ये wrap करावे लागेल.

स्त्रोत (Source): https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde