ఒక component లోపల డేటాను నిలిపి ఉంచడానికి React మీకు రెండు మార్గాలను అందిస్తుంది: useState మరియు useRef. చూడటానికి ఇవి రెండూ ఒకేలా అనిపిస్తాయి. రెండూ మీరు చదవగలిగే విలువను అందిస్తాయి, రెండూ re-renders సమయంలో కూడా అలాగే ఉంటాయి, మరియు రెండూ ఒక క్లిక్ నుండి తదుపరి క్లిక్ వరకు విలువను గుర్తుంచుకోవడానికి అనుమతిస్తాయి. అయితే, మీరు తప్పు దానిని ఎంచుకుంటే, స్క్రీన్ అప్‌డేట్ కాకపోవడం లేదా అనవసరమైన re-renders నిరంతరాయంగా జరగడం వంటి సమస్యలు ఎదురవుతాయి. ఈ ఎంపిక అనేది syntax గురించి కాదు. React కి ఆ విషయం తెలియాలా వద్దా అనే దాని గురించి.

ప్రతి Hook నిజంగా ఏమి చేస్తుంది

useState అనేది ఒక component తో కమ్యూనికేట్ చేయడానికి React ఉపయోగించే అధికారిక మార్గం. మీరు దానిని పిలిచినప్పుడు, మీకు ఒక విలువ (value) మరియు ఒక setter function తిరిగి వస్తాయి. React ఆ విలువను component యొక్క identity లో భాగంగా ట్రాక్ చేస్తుంది. Setter ఫంక్షన్ రన్ అయినప్పుడు, "ఏదో మారింది" అని React గుర్తించి, స్క్రీన్ అప్‌డేట్ అవ్వడానికి ఒక కొత్త render ని షెడ్యూల్ చేస్తుంది.

మరోవైపు, useRef అనేది current అనే property కలిగిన ఒక సాధారణ JavaScript object మాత్రమే. ప్రతి render సమయంలో కూడా మీకు అదే object reference ని ఇస్తానని React వాగ్దానం చేస్తుంది. దాని లోపల ఏముందో అది గమనించదు. someRef.current ని మార్చడం (mutating) నిశ్శబ్దంగా జరుగుతుంది. React దానిని గుర్తించదు.

ఆ నిశ్శబ్దమే దీని ముఖ్య ఉద్దేశ్యం. Refs అనేవి ఒక escape hatch వంటివి, అవి state కి ప్రత్యామ్నాయం కాదు.

Rendering మధ్య తేడా

మీరు state ని మారిస్తే, component re-render అవుతుంది. కొత్త డేటా స్క్రీన్‌పై కనిపించాల్సి వచ్చినప్పుడు, ప్రారంభకులు (beginners) ఆశించే ప్రవర్తన ఇదే. ఒక counter, ఒక form field, లేదా fetch చేసిన users list—యూజర్ దానిని చూడాల్సి ఉంటే, అది బహుశా state లోనే ఉండాలి. state మార్పులు DOM ని sync చేయడానికి renderer కి తెలియజేయాలనే ఆలోచన చుట్టూనే React యొక్క మొత్తం data flow నిర్మించబడింది.

మీరు ఒక ref ని మారిస్తే, దృశ్యపరంగా (visually) ఏమీ జరగదు. వేరియబుల్ వెంటనే మరియు synchronously అప్‌డేట్ అవుతుంది, కానీ component re-render అవ్వదు. దీనివల్ల, visual output లో భాగం కాకుండా component యొక్క అంతర్గత పనులకు (inner workings) సహాయపడే విలువలకు refs చాలా అనుకూలంగా ఉంటాయి. ఉదాహరణకు timer IDs, previous prop snapshots, లేదా direct DOM handles వంటివి. ఒక carousel autoplay ని నడిపించే interval ID గురించి UI కి అనవసరం; ఏ slide కనిపిస్తుందనే దాని గురించి మాత్రమే అది శ్రద్ధ చూపుతుంది. కాబట్టి, interval ID ని ref లో ఉంచాలి.

State ఎప్పుడు సరైన సాధనం

ఏదైనా విలువ మీ UI యొక్క ఉపరితలం (surface) లో భాగంగా ఉన్నప్పుడు useState ని ఉపయోగించండి.

Input fields దీనికి స్పష్టమైన ఉదాహరణ. ఒక యూజర్ email address టైప్ చేసినప్పుడు, మీరు దానిని validate చేసి బాక్స్ కింద error message చూపించాలనుకుంటే, ఆ email string కి state అవసరం. Validation logic మరియు error banner రెండూ తాజా విలువ (latest value) పైనే ఆధారపడి ఉంటాయి, మరియు state వల్ల re-render జరగడం వల్లే React ఆ banner ని అప్‌డేట్ చేయగలుగుతుంది.

Counts మరియు toggles మరొక ముఖ్యమైన అంశం. స్కోరును పెంచే బటన్, modal open/close flag, tab index—ఇవన్నీ state ద్వారానే జరుగుతాయి, ఎందుకంటే విలువతో పాటు render output కూడా మారుతుంది. ఒక search string పై ఆధారపడి ఉండే filtered list వంటి derived values కూడా సాధారణంగా state తోనే మొదలవుతాయి, ఎందుకంటే వాటి మూల విలువ (source value) యూజర్‌కు కనిపిస్తుంది.

ఇక్కడ అర్థం చేసుకోవలసిన ఒక సమయ సంబంధిత (timing) అంశం కూడా ఉంది. State updates అనేవి asynchronous మరియు batched గా జరుగుతాయి. ఒకే event handler లో మీరు setCount(count + 1) ని మూడుసార్లు పిలిస్తే, React మూడుసార్లు render చేయదు. అది వాటన్నింటినీ కలిపి ఒకే update గా మారుస్తుంది. అలాగే, మీ function రన్ అవుతున్నప్పుడు అందులోని count వేరియబుల్ తదుపరి render వరకు పాత విలువనే (stale) కలిగి ఉంటుంది. ఈ batching అనేది ఒక ఫీచర్. ఇది అప్లికేషన్లను వేగంగా ఉంచుతుంది. కానీ దీని అర్థం ఏమిటంటే, మీరు తదుపరి లైన్ లోనే state వేరియబుల్ కొత్త విలువను చూపిస్తుందని ఆశించలేరు.

Refs ఎప్పుడు ఉపయోగపడతాయి

ప్లాంబింగ్ (అంతర్గత పనుల) కోసం useRef ని ఉపయోగించండి, కాకుండా