React AbortControllerలతో Race Conditionsలను నివారించండి

వెబ్ యాప్‌లలో వినియోగదారులు చాలా వేగంగా కదులుతారు. ఈ వేగం డెవలపర్లకు రెండు ప్రధాన సమస్యలను కలిగిస్తుంది.

మొదటి సమస్య unmounted component trap. ఒక వినియోగదారు డేటాను fetch చేయడానికి ఒక బటన్‌ను క్లిక్ చేస్తారు. ఆ రిక్వెస్ట్ పూర్తి కావడానికి నాలుగు సెకన్ల సమయం పడుతుంది. రెండు సెకన్ల తర్వాత, వినియోగదారు back క్లిక్ చేసి పేజీ నుండి వెళ్ళిపోతారు. కానీ ఆ రిక్వెస్ట్ బ్యాక్‌గ్రౌండ్‌లో కొనసాగుతూనే ఉంటుంది. డేటా వచ్చినప్పుడు, కోడ్ ఇప్పటికే లేని ఒక componentను అప్‌డేట్ చేయడానికి ప్రయత్నిస్తుంది. దీనివల్ల memory leaks ఏర్పడతాయి.

రెండవ సమస్య race condition. ఇది సెర్చ్ బార్లలో తరచుగా జరుగుతుంది.

  • వినియోగదారు "A" అని టైప్ చేస్తారు. Request 1 ప్రారంభమవుతుంది.
  • వినియోగదారు "AB" అని టైప్ చేస్తారు. Request 2 ప్రారంభమవుతుంది.
  • Request 2 ముందుగా పూర్తయి సరైన డేటాను చూపిస్తుంది.
  • Request 1 ఆలస్యంగా పూర్తయి, పాత డేటాతో స్క్రీన్‌ను overwrite చేస్తుంది.

మీరు AbortController API ద్వారా ఈ రెండు సమస్యలను పరిష్కరించవచ్చు. ఈ టూల్ అవసరం లేనప్పుడు నెట్‌వర్క్ రిక్వెస్ట్‌ను ఆపివేయడానికి మీకు అనుమతిస్తుంది.

దీనిని ఎలా అమలు చేయాలి:

  • మీ useEffect లో కొత్త AbortControllerని సృష్టించండి.
  • మీ fetch రిక్వెస్ట్‌కు controller.signalను పంపండి.
  • ఎర్రర్‌ను హ్యాండిల్ చేయడానికి try/catch బ్లాక్‌ను ఉపయోగించండి.
  • కావాలని చేసిన cancellationsలను విస్మరించడానికి, ఎర్రర్ పేరు AbortError అవునా కాదా అని తనిఖీ చేయండి.
  • controller.abort()ని కాల్ చేయడానికి మీ useEffectలో ఒక cleanup functionను రిటర్న్ చేయండి.

కాంపోనెంట్ unmount అయినప్పుడు లేదా dependency మారినప్పుడు ఈ ప్యాటర్న్ పనిచేస్తుంది.

ఈ విధానం వల్ల కలిగే ప్రయోజనాలు:

  • పాత డేటా కొత్త డేటాను overwrite చేయకుండా మీరు నిరోధించవచ్చు.
  • మీ React యాప్‌లో memory leaks రాకుండా నిరోధించవచ్చు.
  • బ్రౌజర్ నెట్‌వర్క్ కనెక్షన్‌లను ఖాళీ చేయవచ్చు.
  • మీ అప్లికేషన్ ఊహించదగినదిగా (predictable) మరియు స్థిరంగా (stable) ఉంటుంది.

Source: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899