React Refs மற்றும் useRef Hook-ஐப் பயன்படுத்துதல்
React ஒரு declarative approach அணுகுமுறையைப் பயன்படுத்துகிறது. நீங்கள் state-ஐப் புதுப்பித்தால், React UI-ஐப் புதுப்பிக்கும். இது பெரும்பாலான பணிகளுக்குச் சரியாக இருக்கும்.
ஆனால் சில நேரங்களில் நீங்கள் Virtual DOM-க்கு வெளியே செல்ல வேண்டியிருக்கும். ஒரு உண்மையான HTML உறுப்பை (element) நேரடியாகத் தொட வேண்டியிருக்கலாம். இங்குதான் Refs மற்றும் useRef hook பயன்படுகின்றன.
Ref என்றால் என்ன?
Ref என்பது ஒரு pointer ஆகும். இது React-ஐ நேரடியாக ஒரு native DOM node-உடன் இணைக்கிறது.
useState-க்கு பதிலாக ஏன் useRef-ஐப் பயன்படுத்த வேண்டும்?
State புதுப்பிப்புகள் ஒரு re-render-ஐத் தூண்டும். அதாவது, React திரையில் உள்ள component-ஐ மீண்டும் வரையும். Ref புதுப்பிப்புகள் re-render-ஐத் தூண்டாது. இதனால், மதிப்புகள் மாறினாலும் அவை உடனடியாக UI-இல் தெரிய வேண்டிய அவசியம் இல்லாத சூழலுக்கு இவை மிகவும் பொருத்தமானவை.
பொதுவான பயன்பாட்டு முறைகள்:
• ஒரு input field-ஐத் தானாகவே focus செய்தல். • வீடியோ அல்லது ஆடியோ உறுப்புகளைக் கட்டுப்படுத்துதல் (play/pause). • ஒரு உறுப்பின் அகலம் அல்லது உயரத்தை அளவிடுதல். • intervals அல்லது timeouts-க்கான timer IDs-களைச் சேமித்தல்.
useRef-ஐப் பயன்படுத்துவது எப்படி:
- React-லிருந்து
useRef-ஐ import செய்யவும். - அதைத் தொடங்குதல் (Initialize):
const myRef = useRef(null). - அதை ஒரு உறுப்புடன் இணைத்தல்:
<input ref={myRef} />. - அதன் மதிப்பை அணுகுதல்:
myRef.current.
உதாரணம் 1: ஒரு input-ஐத் தானாகவே focus செய்தல்
ஒரு பயனர் ஒரு பக்கத்திற்குள் நுழையும்போது, கர்சர் (cursor) உரையாடல் பெட்டியில் (text box) இருக்க வேண்டும் என்று நீங்கள் விரும்பினால், component mount ஆன பிறகு myRef.current.focus() என்பதை அழைக்க useEffect-ஐப் பயன்படுத்தலாம்.
உதாரணம் 2: ஒரு ஸ்டாப்வாட்ச் (Stopwatch)
நீங்கள் ஒரு setInterval ID-ஐ state-இல் சேமித்தால், timer ஒவ்வொரு முறை இயங்கும்போதும் component re-render ஆகும். இது மெதுவாக இருக்கும். ஆனால், அந்த ID-ஐ ஒரு ref-இல் சேமித்தால், component வேகமாகச் செயல்படும். மதிப்புகள் re-renders-களுக்கு இடையிலும் பாதுகாப்பாக இருக்கும், மேலும் உலாவியில் (browser) கூடுதல் வேலையைச் செய்யத் தேவையில்லை.
State vs Ref:
• State: re-render-ஐத் தூண்டும். UI தரவுகளுக்குப் பயன்படுத்தப்படுகிறது. புதுப்பிப்புகள் asynchronous முறையில் நடக்கும். • Ref: re-render ஆகாது. DOM அணுகல் மற்றும் நினைவகத்திற்கு (memory) பயன்படுத்தப்படுகிறது. புதுப்பிப்புகள் synchronous முறையில் நடக்கும்.
அனுபவம் வாய்ந்தவர்களுக்கான (Seniors) சில குறிப்புகள்:
• அதிகமாகப் பயன்படுத்துவதைத் தவிர்க்கவும். அறிவிப்பு முறை (declarative logic) தோல்வியடையும் போது மட்டும் refs-ஐப் பயன்படுத்தவும்.
• நினைவகத்தைச் சுத்தப்படுத்துங்கள் (Clean up memory). உங்கள் cleanup function-இல் எப்போதும் intervals அல்லது event listeners-களை நீக்கவும்.
• rendering-ன் போது refs-இல் எழுத வேண்டாம். useEffect அல்லது event handlers-க்குள் மட்டும் ref.current-ஐப் புதுப்பிக்கவும். இது side effects-களைத் தவிர்க்கும்.
• forwardRef-ஐப் பயன்படுத்தவும். ஒரு custom child component-க்கு ref-ஐ அனுப்ப விரும்பினால், அந்த child component-ஐ React.forwardRef-இல் சுற்ற வேண்டும்.
Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde