React మీ కాంపోనెంట్లు అంచనా వేయదగినవిగా (predictable) ఉండాలని కోరుకుంటుంది. దానికి ఒకే రకమైన state మరియు props ఇస్తే, అది ప్రతిసారీ ఒకే రకమైన UIని చూపాలి. కానీ చాలా నిజమైన అప్లికేషన్లు ఆ పరిధిలో మాత్రమే బతకలేవు. వాటికి బయటి ప్రపంచంతో సంబంధం ఉండాలి. ఒక డాష్‌బోర్డ్‌కు సర్వర్ నుండి తాజా నంబర్లు కావాలి. ఒక చాట్ విడ్జెట్‌కు మెసేజ్‌ల కోసం వినాలి (listen). ఒక టైమర్ టిక్ అవ్వాలి. ఈ ఆపరేషన్లు సైడ్ ఎఫెక్ట్స్ (side effects), మరియు ఇవి React యొక్క రెండర్ సైకిల్ (render cycle) వెలుపల ఉంటాయి. మీ కాంపోనెంట్ స్వచ్ఛంగా ఉండటానికి, ఆ గందరగోళమైన, అంచనా వేయలేని పనులను మీరు useEffect హుక్ (hook) లో ఉంచుతారు.

సైడ్ ఎఫెక్ట్స్: useEffect లో ఏవి ఉండాలి?

సైడ్ ఎఫెక్ట్ అంటే JSXని తిరిగి ఇవ్వడం (returning JSX) కాకుండా, ప్రపంచంతో సంబంధం కలిగి ఉండే ఏదైనా విషయం. React యొక్క రెండర్ ఫేజ్ స్వచ్ఛంగా (pure) ఉండాలి. మీరు డేటాను ఫెచ్ చేయడం (fetching data), గ్లోబల్ వేరియబుల్స్‌లో రాయడం, లేదా DOMకి లిజనర్‌లను జోడించడం ప్రారంభించినప్పుడు, మీరు స్వచ్ఛమైన పరిధి నుండి బయటకు అడుగు పెట్టినట్లు లెక్క.

సాధారణ ఉదాహరణలు:

  • API నుండి డేటాను ఫెచ్ చేయడం
  • టైమర్‌లు లేదా ఇంటర్వల్స్‌ను సెటప్ చేయడం
  • window లేదా documentకి ఈవెంట్ లిజనర్‌లను జోడించడం
  • బ్రౌజర్ ట్యాబ్ టైటిల్‌ను అప్‌డేట్ చేయడం
  • WebSockets కి కనెక్ట్ అవ్వడం

ఈ పనులన్నీ ఒకే లక్షణాన్ని కలిగి ఉంటాయి: ఇవి మీ కాంపోనెంట్ యొక్క return స్టేట్‌మెంట్‌లో లేదా ప్రధాన రెండర్ లాజిక్‌లో ఉండకూడదు. రెండర్ బాడీలో నేరుగా setInterval వంటి బ్రౌజర్ APIని పిలవడానికి ప్రయత్నిస్తే, అది ప్రతి రెండర్ సమయంలోనూ రన్ అవుతుంది, దీనివల్ల డూప్లికేట్ టైమర్‌లు మరియు గందరగోళ ప్రవర్తన ఏర్పడుతుంది. ఈ పనిని వేరు చేయడానికి మరియు సరైన సమయంలో రన్ చేయడానికి useEffect ఉద్దేశించబడింది.

డిపెండెన్సీ అర్రే (Dependency Array) టైమింగ్‌ను ఎలా నియంత్రిస్తుంది

useEffect కి ఇచ్చే రెండవ ఆర్గ్యుమెంట్ డిపెండెన్సీ అర్రే, మరియు క్లాస్ కాంపోనెంట్స్ నుండి మారే డెవలపర్లకు ఇది అత్యంత గందరగోళాన్ని కలిగించే అంశం. ప్రస్తుత రెండర్ తర్వాత మీ ఎఫెక్ట్‌ను స్కిప్ చేయాలా లేదా అమలు చేయాలా అని నిర్ణయించడానికి React పర్యవేక్షించే వేరియబుల్స్ సెట్ అని దీనిని అనుకోండి.

మీరు పదేపదే ఉపయోగించే మూడు పద్ధతులు ఉన్నాయి.

డిపెండెన్సీ అర్రే అసలు లేకపోవడం. మీరు అర్రేను పూర్తిగా వదిలేస్తే, మొదటి రెండర్ తో సహా ప్రతి ఒక్క రెండర్ తర్వాత ఎఫెక్ట్ రన్ అవ్వాలని React భావిస్తుంది. ఇది మీకు చాలా అరుదుగా అవసరమవుతుంది. మీ ఎఫెక్ట్ నెట్‌వర్క్ రిక్వెస్ట్ లేదా భారీ DOM ఆపరేషన్‌ను నిర్వహిస్తుంటే, ప్రతి కీస్ట్రోక్ లేదా స్టేట్ మార్పుపై దానిని రన్ చేయడం వల్ల పనితీరు (performance) దెబ్బతింటుంది. ఏదైనా prop లేదా state మారినప్పుడు దానిని మళ్ళీ రన్ చేయాల్సి వచ్చినప్పుడు మరియు ఏవి మారాయో మీరు నిర్దిష్టంగా చెప్పలేనప్పుడు మాత్రమే ఈ పద్ధతిని ఉపయోగించండి.

ఖాళీ అర్రే []. ఇది కాంపోనెంట్ మౌంట్ (mount) అయిన వెంటనే మరియు DOM సిద్ధంగా ఉన్న వెంటనే ఎఫెక్ట్‌ను ఒకేసారి రన్ చేయమని React కి చెబుతుంది. ప్రారంభ డేటా ఫెచ్‌ల (initial data fetches) కోసం ఇది సరైన చోటు. ఉదాహరణకు, మీ కాంపోనెంట్ యూజర్ ప్రొఫైల్ డేటాను లోడ్ చేస్తుంటే, ప్రొఫైల్ పేజీ కనిపించినప్పుడు మాత్రమే ఆ రిక్వెస్ట్ ఒకేసారి జరగాలి తప్ప, యూజర్ పేజీలో కింద ఉన్న ఫారమ్‌తో ఇంటరాక్ట్ అయిన ప్రతిసారీ జరగకూడదు.

నిర్దిష్ట వేరియబుల్స్‌తో కూడిన అర్రే [count]. ఇది ఒక ఖచ్చితమైన సాధనం (precision tool). React ఈ డిపెండెన్సీల ప్రస్తుత విలువలను గత రెండర్ సమయంలో వాటి విలువలతో పోల్చి చూస్తుంది. వాటిలో ఏదైనా మారితే, ఎఫెక్ట్ రన్ అవుతుంది. జాబితాలో ఏదీ మారకపోతే, React ఎఫెక్ట్‌ను పూర్తిగా స్కిప్ చేస్తుంది.

మీరు బ్రౌజర్ ట్యాబ్ టైటిల్‌ను ఒక స్టేట్ వేరియబుల్‌తో సింక్ (sync) చేస్తున్నట్లయితే, ఆ వేరియబుల్‌ను డిపెండెన్సీ అర్రేలో ఉంచాలి. అప్పుడు ఆ విలువ మారినప్పుడు మాత్రమే React టైటిల్‌ను అప్‌డేట్ చేస్తుంది. దానిని వదిలేస్తే, టైటిల్ పాతదే (stale) ఉంటుంది. సంబంధం లేని స్టేట్ వేరియబుల్స్‌ను అందులో ఉంచితే, అనవసరమైన మార్పుల కోసం టైటిల్‌ను అప్‌డేట్ చేస్తూ సైకిల్స్‌ను వృథా చేస్తారు.

క్లీనప్ (Cleanup) అనేది ఐచ్ఛికం కాదు

కొన్ని ఎఫెక్ట్స్ ఆచూకలను (footprints) వదిలివేస్తాయి. ఒక టైమర్ లెక్కించడమే కొనసాగిస్తుంది. ఒక ఈవెంట్ లిజనర్ పనిచేస్తూనే ఉంటుంది. ఒక WebSocket తెరిచే ఉంటుంది. మీ కాంపోనెంట్ అన్‌మౌంట్ (unmount) అయినప్పుడు, లేదా డిపెండెన్సీలు మారడం వల్ల ఎఫెక్ట్ మళ్ళీ రన్ అయినప్పుడు కూడా, React పాత ఎఫెక్ట్ యొక్క అవశేషాలను ఆటోమేటిక్‌గా క్లీన్ చేయదు. అది మీ బాధ్యత.

useEffect లోపల ఒక ఫంక్షన్‌ను రిటర్న్ చేయడం ద్వారా మీరు క్లీనప్ ఫంక్షన్‌ను సృష్టించవచ్చు. React తదుపరి ఎఫెక్ట్‌ను వర్తింపజేయడానికి ముందు మరియు కాంపోనెంట్ స్క్రీన్ నుండి వెళ్ళినప్పుడు ఒకసారి ఈ క్లీనప్ ఫంక్షన్‌ను పిలుస్తుంది.

మీరు ఈ క్రింది వాటి కోసం క్లీనప్‌ను ఉపయోగించాలి:

  • clearInterval లేదా clearTimeout తో ఇంటర్వల్స్ లేదా టైమౌట్‌లను క్లియర్ చేయడం
  • window, document, లేదా బాహ్య నోడ్స్‌కు జోడించిన ఈవెంట్ లిజనర్‌లను తొలగించడం
  • డేటా స్ట్రీమ్స్ లేదా సర్వీసుల నుండి అన్‌సబ్‌స్క్రైబ్ (Unsubscribing) చేయడం

దీనిని నిర్లక్ష్యం చేస్తే, మెమరీ లీక్స్ (memory leaks) ఏర్పడతాయి. ఒక కాంపోనెంట్ మౌంట్ అవుతుంది, ఒక స్క్రోల్ లిజనర్‌ను జోడిస్తుంది, అన్‌మౌంట్ అవుతుంది, కానీ ఆ లిజనర్ అలాగే ఉంటుంది. బ్రౌజర్ ఆ కాల్‌బ్యాక్ మరియు అది రిఫరెన్స్ చేస్తున్న DOM నోడ్స్‌ను పట్టుకుని ఉంటుంది. కాలక్రమేణా, ముఖ్యంగా భారీ నావిగేషన్ ఉన్న సింగిల్-పేజీ అప్లికేషన్లలో, ఈ "దయ్యాలు" (ghosts) పేరుకుపోయి ట్యాబ్‌ను నెమ్మదింపజేస్తాయి. దీనికి పరిష్కారం సాధారణంగా కొన్ని లైన్లే: మీరు జోడించిన దానిని తొలగించే ఫంక్షన్‌ను రిటర్న్ చేయండి.

ప్రొడక్షన్‌కు వెళ్లే సాధారణ తప్పులు

సరళమైన ప్రత్యామ్నాయం ఉన్నప్పటికీ, అనుభవజ్ఞులైన డెవలపర్లు కూడా useEffect ను ఉపయోగిస్తుంటారు. కోడ్ రివ్యూ సమయంలో హెచ్చరికగా (red flag) పరిగణించాల్సిన మూడు పద్ధతులు ఇక్కడ ఉన్నాయి.

అనంతమైన లూప్‌లు (Infinite loops). ఒకవేళ అదే వేరియబుల్ మీ dependency arrayలో ఉంటే, ఆ సైకిల్‌ను నిలిపివేసే గేట్ కండిషన్ లేనంత వరకు, useEffect లోపల స్టేట్ వేరియబుల్‌ను ఎప్పుడూ అప్‌డేట్ చేయకండి. మీరు countని చదివి, దానిని పెంచి (increment), countని ఒక dependencyగా పేర్కొంటే, React ఆ మార్పును గమనిస్తుంది, re-render చేస్తుంది, ఎఫెక్ట్‌ను మళ్ళీ రన్ చేస్తుంది, మళ్ళీ increment చేస్తుంది మరియు బ్రౌజర్‌ను లాక్ చేస్తుంది.

అనవసరమైన ఎఫెక్ట్‌లు (Unnecessary effects). ఇప్పటికే ఉన్న props లేదా state నుండి ఒక విలువను లెక్కించడానికి useEffectను ఉపయోగించకండి. మీరు దానిని render సమయంలో నేరుగా లెక్కించగలిగితే (derive), అలాగే చేయండి. డెరివ్డ్ వాల్యూస్ (Derived values) కాంపోనెంట్ బాడీలో లేదా useMemoతో కూడిన memoized calculationలో ఉండాలి. వాటిని ఎఫెక్ట్‌లోకి మార్చడం వల్ల ఎటువంటి ప్రయోజనం లేకుండా మీ లాజిక్ render మరియు effect ఫేజ్‌ల మధ్య విడిపోతుంది మరియు కోడ్‌ను అర్థం చేసుకోవడం కష్టతరం చేస్తుంది.

యూజర్ చర్యల కోసం తప్పుడు సాధనం. use