𝗛𝗼𝘄 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗥𝗲𝗮𝗰𝘁 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗦𝗵𝗼𝘂𝗹𝗱 𝗧𝗵𝗶𝗻𝗸 𝗔𝗯𝗼𝘂𝘁 𝗛𝗼𝗼𝗸𝘀

చాలా మంది డెవలపర్లు React ఎలా రెండర్ అవుతుందో అర్థం చేసుకోకుండానే hooks నేర్చుకుంటారు. దీనివల్ల గందరగోళం ఏర్పడుతుంది. Hooks లలో ప్రావీణ్యం సాధించాలంటే, మీరు ఐదు ప్రధాన బాధ్యతలను అర్థం చేసుకోవాలి:

• డేటాను గుర్తుంచుకోవడం • side effectsలను అమలు చేయడం • డేటాను పంచుకోవడం • రెండరింగ్‌ను ఆప్టిమైజ్ చేయడం • షెడ్యూలింగ్‌ను నియంత్రించడం

State మార్పులు re-renders ను ప్రేరేపిస్తాయి. ప్రతి re-render లో వేరియబుల్స్, ఆబ్జెక్ట్స్ మరియు ఫంక్షన్స్ మళ్ళీ సృష్టించబడతాయి. useMemo మరియు useCallback ఎందుకు అవసరమో ఈ చిన్న నిజమే వివరిస్తుంది.

Understanding the Hooks

State మరియు ఆర్డరింగ్ React, state ను component Fiber కి అనుసంధానించబడిన linked list లో నిల్వ చేస్తుంది. అందుకే మీరు conditions లేదా loops లోపల hooks ను పిలవలేరు. సరైన state ను కనుగొనడానికి React కాల్స్ యొక్క క్రమం (order) పై ఆధారపడుతుంది.

The Batching Reality మీరు setState ని పిలిచినప్పుడు, React ఒక అప్‌డేట్‌ను షెడ్యూల్ చేస్తుంది. ఇది విలువను వెంటనే మార్చదు. అందుకే state ని సెట్ చేసిన వెంటనే లాగ్ (log) చేస్తే పాత విలువ కనిపిస్తుంది. పాత డేటా (stale data) రాకుండా ఉండటానికి ఎల్లప్పుడూ functional update pattern ను ఉపయోగించండి:

The useEffect Mental Model useEffect ను ఒక lifecycle method లాగా చూడటం ఆపండి. మీ component ను APIs లేదా WebSockets వంటి బాహ్య వ్యవస్థలతో (external systems) సింక్రొనైజ్ చేయడానికి దీనిని ఉపయోగించండి.

ముఖ్య గమనిక: useEffect రన్ కావడానికి ముందే React స్క్రీన్‌ను పెయింట్ చేస్తుంది. దీనివల్ల మీ effect UI ని బ్లాక్ చేయకుండా ఉంటుంది. యూజర్ చూడకముందే మీరు DOM ను కొలవాల్సి వస్తే, useLayoutEffect ను ఉపయోగించండి.

The useRef Reality ref అనేది కేవలం DOM ఎలిమెంట్స్ కోసం మాత్రమే కాదు. ఇది ఒక పర్మనెంట్ మ్యూటబుల్ కంటైనర్ (persistent mutable container). React రెండర్ల మధ్య ఒకే ఆబ్జెక్ట్ రిఫరెన్స్‌ను ఉంచుతుంది. ref.current ను మార్చడం వల్ల re-render ట్రిగ్గర్ కాదు. దీనిని టైమర్లు, సాకెట్లు లేదా మునుపటి విలువల (previous values) కోసం ఉపయోగించండి.

The Memoization Trap useMemo అనేది వేగం కోసం ఉపయోగించే మ్యాజిక్ బటన్ కాదు. దీనికి కొంత ఓవర్‌హెడ్ ఖర్చు (overhead cost) ఉంటుంది. React క్యాచీని (cache) నిల్వ చేయాలి మరియు డిపెండెన్సీలను పోల్చాలి.

కాలిక్యులేషన్ ఖర్చు, memoization ఖర్చు కంటే ఎక్కువగా ఉన్నప్పుడు మాత్రమే useMemo ను ఉపయోగించండి. మీరు దీనిని సాధారణ గణిత ప్రక్రియల కోసం ఉపయోగిస్తే, మీ యాప్ వేగం తగ్గుతుంది.

Context is not State Management Context అనేది dependency injection కోసం ఉపయోగించబడుతుంది. ఇది prop drilling ను నివారించడానికి సహాయపడుతుంది. అయితే, ఒక Context విలువ మారినప్పుడు, ప్రతి కన్స్యూమర్ (consumer) re-render అవుతుంది. మీ మొత్తం గ్లోబల్ స్టేట్‌ను ఒకే ప్రొవైడర్‌లో ఉంచకండి. మీ సందర్భాలను (contexts) వాటి ప్రయోజనం ఆధారంగా విభజించండి.

అధునాతన పద్ధతులు (Advanced Patterns) • useReducer: అనేక useState కాల్స్ ఉపయోగించే బదులు, సంక్లిష్టమైన state machines కోసం దీనిని ఉపయోగించండి. • startTransition: భారీ అప్‌డేట్స్ జరుగుతున్నప్పుడు మీ UI స్పందించేలా (responsive) ఉంచడానికి దీనిని ఉపయోగించండి. • useDeferredValue: యూజర్ టైప్ చేస్తున్నప్పుడు ఖరీదైన (expensive) UI అప్‌డేట్స్‌ను ఆలస్యం చేయడానికి దీనిని ఉపయోగించండి.

లాజిక్‌ను custom hooks లోకి మార్చడం ద్వారా క్లీన్ కోడ్‌ను రాయండి. 1200 లైన్ల కంపోనెంట్‌ను నిర్వహించడం కష్టం. లాజిక్‌ను కలిగి ఉన్న ఐదు చిన్న హుక్స్ (hooks) స్కేల్ చేయడం సులభం.

మూలం: https://dev.to/jagadeesh_008/how-advanced-react-developers-should-think-about-hooks-102l