React applications are built from components, and every component lives a life. It appears on the screen. It reacts to n

React అప్లికేషన్లు కాంపోనెంట్స్ (components) తో నిర్మించబడతాయి, మరియు ప్రతి కాంపోనెంట్‌కు ఒక జీవిత చక్రం ఉంటుంది. అది స్క్రీన్‌పై కనిపిస్తుంది. కొత్త సమాచారానికి ప్రతిస్పందిస్తుంది. చివరకు అది మాయమవుతుంది. ఈ క్రమాన్ని విస్మరిస్తే దాని మూల్యం భారీగా ఉంటుంది. మెమరీ లీక్స్ (Memory leaks) ఏర్పడతాయి. రెండర్ పెర్ఫార్మెన్స్ (Render performance) క్షీణిస్తుంది. వినియోగదారులు బటన్‌లను క్లిక్ చేసినప్పుడు అవి స్పందించవు, ఎందుకంటే వాటికి అనుసంధానించబడిన కాంపోనెంట్ పది నిమిషాల క్రితమే unmount అయిపోయింది, కానీ ఈవెంట్ లిజనర్ (event listener) ఇంకా సజీవంగానే ఉంటుంది. కాంపోనెంట్ లైఫ్ సైకిల్‌ను అర్థం చేసుకోవడం అనేది కేవలం ఒక విద్యాపరమైన అంశం మాత్రమే కాదు. వాస్తవ వినియోగంలో నమ్మదగిన సాఫ్ట్‌వేర్‌ను వ్రాయడానికి ఇది పునాది.

ఒక కాంపోనెంట్ ఉనికిని మూడు దశలుగా ఊహించుకోండి. డెవలపర్లు తరచుగా వీటిని పుట్టుక (birth), ఎదుగుదల (growth), మరియు మరణం (death) అని వర్ణిస్తారు. React వీటిని mounting, updating, మరియు unmounting అని పిలుస్తుంది. ప్రతి దశకు ఒక నిర్దిష్టమైన పని ఉంటుంది, మరియు ప్రతి దశ మీకు కోడ్‌ను రన్ చేయడానికి లేదా క్లీన్ అప్ చేయడానికి ఒక ఖచ్చితమైన సమయాన్ని ఇస్తుంది.

మూడు దశలు

Mounting అంటే పుట్టుక. కాంపోనెంట్ సృష్టించబడి మొదటిసారి బ్రౌజర్ DOM లోకి ప్రవేశిస్తుంది. ఇది మీ సెటప్ విండో. కాంపోనెంట్‌కు రిమోట్ డేటా అవసరమైతే, ఈ సమయంలోనే మీరు దానిని రిక్వెస్ట్ చేస్తారు. ఒకవేళ props నుండి లెక్కించబడిన ప్రారంభ state అవసరమైతే, దానిని ఇక్కడే చేస్తారు. క్లాస్ కాంపోనెంట్ యుగంలో, ఇది componentDidMount పరిధిలోకి వచ్చేది. ఆధునిక ఫంక్షనల్ కాంపోనెంట్స్‌తో, మీరు దీనిని useEffect మరియు ఖాళీ డిపెండెన్సీ అర్రే (empty dependency array) తో హ్యాండిల్ చేస్తారు. ముఖ్యమైన విషయం ఏమిటంటే, React ఎలిమెంట్‌ను పేజీలో ఉంచిన వెంటనే ఈ కోడ్ బ్లాక్ ఒకేసారి రన్ అవుతుంది. యూజర్ ప్రొఫైల్‌ను పొందడం లేదా localStorage నుండి విలువను చదవడం వంటి వన్-టైమ్ సెటప్‌లకు ఇది సరైనది.

Updating అంటే ఎదుగుదల. మౌంట్ అయిన కాంపోనెంట్ అలాగే నిశ్చలంగా ఉండదు. పేరెంట్ నుండి props వస్తాయి. యూజర్ ఇంటరాక్షన్ వల్ల state మారుతుంది. పేరెంట్ స్వయంగా re-render అయినప్పుడు, చైల్డ్ కూడా దానిని అనుసరించాల్సి ఉంటుంది. మీ డేటాతో UIని సింక్ (sync) లో ఉంచడానికి React ఆ కాంపోనెంట్‌ను తిరిగి re-render చేస్తుంది. ఈ దశ కాంపోనెంట్ జీవితకాలంలో చాలాసార్లు పునరావృతమవుతుంది. ప్రతిసారీ ఒక డిపెండెన్సీ మారినప్పుడు, మీ effects మళ్ళీ రన్ అవుతాయి మరియు కాంపోనెంట్ కొత్త అవుట్‌పుట్‌ను DOM లోకి పంపిస్తుంది. ఈ దశ చాలా తరచుగా జరుగుతుంది కాబట్టి, ఇక్కడే చాలా పెర్ఫార్మెన్స్ సమస్యలు మొదలవుతాయి. ఇక్కడ అనవసరమైన పనులు వేగంగా పేరుకుపోతాయి.

Unmounting అంటే మరణం. వినియోగదారు వేరే పేజీకి వెళ్లడం వల్ల లేదా కండిషనల్ రెండర్ (conditional render) మారడం వల్ల కాంపోనెంట్ స్క్రీన్ నుండి వెళ్ళిపోతుంది. ఈ సమయంలో, కాంపోనెంట్ నాశనమవుతుంది, కానీ బయటి ప్రపంచానికి అది ఎప్పుడూ తెలియకపోవచ్చు. టైమర్లు (Timers) నడుస్తూనే ఉంటాయి. WebSockets వింటూనే ఉంటాయి. window ఆబ్జెక్ట్‌పై ఉన్న ఈవెంట్ లిజనర్లు అలాగే ఉంటాయి. మీరు వీటిని క్లీన్ అప్ చేయకపోతే, అవి చనిపోయిన కాంపోనెంట్లకు రిఫరెన్స్‌లను కలిగి ఉండి మెమరీ లీక్‌లకు దారితీస్తాయి. బ్రౌజర్ ఈ "దయ్యాల" (ghosts) కోసం సైకిల్స్‌ను వృథా చేస్తుంది. కాంపోనెంట్ పూర్తిగా మాయమవకముందే ఇంటర్వల్స్‌ను ఆపడానికి, కనెక్షన్‌లను మూసివేయడానికి మరియు లిజనర్లను తొలగించడానికి React మీకు ఒక క్లీనప్ ఫంక్షన్‌ను (cleanup function) అందిస్తుంది.

క్లాస్ మెథడ్స్ నుండి హుక్స్ (Hooks) వరకు

సంవత్సరాల తరబడి, React ఇంజనీర్లు ఈ దశలను క్లాస్ కాంపోనెంట్స్ ద్వారా నిర్వహించారు. లాజిక్ వేర్వేరు మెథడ్స్‌లో విభజించబడింది. మీరు componentDidMount లో డేటాను పొందేవారు, componentDidUpdate లో prop మార్పులకు స్పందించేవారు, మరియు componentWillUnmount లో క్లీనప్ చేసేవారు. సమస్య ఏమిటంటే, సంబంధిత లాజిక్ అంతా చెల్లాచెదురుగా ఉండేది. లైవ్ చాట్ కనెక్షన్ వంటి ఒకే ఫీచర్ కోసం, కనెక్ట్ అవ్వడానికి, త్రెడ్ మార్పులను తనిఖీ చేయడానికి మరియు డిస్‌కనెక్ట్ అవ్వడానికి మూడు వేర్వేరు లైఫ్ సైకిల్ మెథడ్స్‌లో కోడ్ అవసరమయ్యేది.

హుక్స్ (Hooks) ఆ పరిస్థితిని మార్చేశాయి. ఫంక్షనల్ కాంపోనెంట్స్‌లోని useEffect హుక్, లైఫ్ సైకిల్ దశల కంటే ఉద్దేశ్యం (purpose) ఆధారంగా లాజిక్‌ను గ్రూప్ చేయడానికి అనుమతిస్తుంది. అయినప్పటికీ, ఎక్కడ చూడాలి అనేది మీకు తెలిస్తే, మెంటల్ మోడల్ స్పష్టంగా ఉంటుంది.

మౌంటింగ్‌ను హ్యాండిల్ చేయడానికి, useEffect(() => { ... }, []) అని రాయండి. ఖాళీ డిపెండెన్సీ అర్రే ఈ ఎఫెక్ట్‌కు ఎటువంటి బాహ్య డిపెండెన్సీలు లేవని React కి చెబుతుంది, కాబట్టి ఇది ప్రారంభ రెండర్ తర్వాత మాత్రమే రన్ అవుతుంది. ఇది componentDidMount స్థానాన్ని భర్తీ చేస్తుంది.

అప్‌డేట్‌లను హ్యాండిల్ చేయడానికి, React ఏ విలువలను గమనించాలో ఆ నిర్దిష్ట విలువలను చేర్చండి: useEffect(() => { ... }, [dependency]). రెండర్‌ల మధ్య dependency మారినప్పుడు,