React Refs మరియు useRef Hook ఉపయోగించడం
React ఒక డిక్లరేటివ్ (declarative) విధానాన్ని ఉపయోగిస్తుంది. మీరు స్టేట్ను (state) అప్డేట్ చేస్తే, React UIని అప్డేట్ చేస్తుంది. ఇది చాలా పనులకు సరిపోతుంది.
కానీ కొన్నిసార్లు మీరు Virtual DOM నుండి బయటకు రావాల్సి ఉంటుంది. మీరు నేరుగా ఒక రియల్ HTML ఎలిమెంట్ను తాకాల్సి రావచ్చు. ఇక్కడే Refs మరియు useRef hook ఉపయోగపడతాయి.
Ref అంటే ఏమిటి?
Ref అనేది ఒక పాయింటర్. ఇది Reactని నేరుగా ఒక నేటివ్ DOM నోడ్కు కనెక్ట్ చేస్తుంది.
useState కి బదులుగా useRef ని ఎందుకు ఉపయోగించాలి?
State అప్డేట్లు re-render ని ప్రేరేపిస్తాయి. అంటే React స్క్రీన్పై కాంపోనెంట్ను మళ్ళీ గీస్తుంది (redraw). Ref అప్డేట్లు re-render ని ప్రేరేపించవు. మారే విలువలు వెంటనే UIలో కనిపించాల్సిన అవసరం లేనప్పుడు ఇవి చాలా ఉపయోగకరంగా ఉంటాయి.
సాధారణ ఉపయోగించే సందర్భాలు:
• ఇన్పుట్ ఫీల్డ్ను ఆటోమేటిక్గా ఫోకస్ చేయడం. • వీడియో లేదా ఆడియో ఎలిమెంట్లను నియంత్రించడం (play/pause). • ఒక ఎలిమెంట్ యొక్క వెడల్పు లేదా ఎత్తును కొలవడం. • ఇంటర్వల్స్ లేదా టైమౌట్ల కోసం టైమర్ IDలను నిల్వ చేయడం.
useRef ని ఎలా ఉపయోగించాలి:
- React నుండి
useRefని ఇంపోర్ట్ చేయండి. - దానిని ప్రారంభించండి (Initialize):
const myRef = useRef(null). - దానిని ఒక ఎలిమెంట్కు అనుసంధానించండి:
<input ref={myRef} />. - విలువను ఇలా పొందండి:
myRef.current.
ఉదాహరణ 1: ఇన్పుట్ను ఆటో-ఫోకస్ చేయడం
వినియోగదారు ఒక పేజీలోకి ప్రవేశించినప్పుడు, కర్సర్ నేరుగా టెక్స్ట్ బాక్స్లో ఉండాలని మీరు కోరుకుంటారు. కాంపోనెంట్ మౌంట్ (mount) అయిన తర్వాత myRef.current.focus() ని కాల్ చేయడానికి మీరు useEffect ని ఉపయోగిస్తారు.
ఉదాహరణ 2: స్టాప్వాచ్ (Stopwatch)
మీరు setInterval IDని స్టేట్లో నిల్వ చేస్తే, టైమర్ ప్రతిసారీ టిక్ అయినప్పుడు కాంపోనెంట్ re-render అవుతుంది. ఇది నెమ్మదిగా ఉంటుంది. ఒకవేళ మీరు ఆ IDని refలో నిల్వ చేస్తే, కాంపోనెంట్ వేగంగా పనిచేస్తుంది. బ్రౌజర్పై అదనపు భారం పడకుండా, రీ-రెండర్ల మధ్య కూడా ఆ విలువ సురక్షితంగా ఉంటుంది.
State vs Ref:
• State: re-render ని ప్రేరేపిస్తుంది. UI డేటా కోసం ఉపయోగిస్తారు. అప్డేట్లు అసింక్రోనస్ (asynchronous) గా ఉంటాయి. • Ref: re-render జరగదు. DOM యాక్సెస్ మరియు మెమరీ కోసం ఉపయోగిస్తారు. అప్డేట్లు సింక్రోనస్ (synchronous) గా ఉంటాయి.
సీనియర్ల కోసం ప్రో టిప్స్ (Pro Tips):
• అతిగా ఉపయోగించకండి: డిక్లరేటివ్ లాజిక్ పనిచేయని సందర్భాల్లో మాత్రమే refs ని ఉపయోగించండి.
• మెమరీని క్లీన్ చేయండి: మీ క్లీనప్ ఫంక్షన్లో ఎల్లప్పుడూ ఇంటర్వల్స్ లేదా ఈవెంట్ లిజనర్లను క్లియర్ చేయండి.
• రెండరింగ్ సమయంలో refs కి విలువలను రాయకండి: useEffect లేదా ఈవెంట్ హ్యాండ్లర్ల లోపల మాత్రమే ref.current ని అప్డేట్ చేయండి. ఇది సైడ్ ఎఫెక్ట్స్ (side effects) ని నివారిస్తుంది.
• forwardRef ని ఉపయోగించండి: మీరు ఒక కస్టమ్ చైల్డ్ కాంపోనెంట్కు ref ని పంపాలనుకుంటే, ఆ చైల్డ్ను React.forwardRef తో చుట్టాలి (wrap చేయాలి).
Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde