React AbortController ഉപയോഗിച്ച് Race Conditions തടയുക

വെബ് ആപ്പുകളിൽ ഉപയോക്താക്കൾ വളരെ വേഗത്തിലാണ് പ്രവർത്തിക്കുന്നത്. ഈ വേഗത ഡെവലപ്പർമാർക്ക് പ്രധാനമായും രണ്ട് പ്രശ്നങ്ങൾ ഉണ്ടാക്കുന്നു.

ആദ്യത്തെ പ്രശ്നം 'unmounted component trap' ആണ്. ഒരു ഉപയോക്താവ് ഡാറ്റ Fetch ചെയ്യാൻ ഒരു ബട്ടൺ ക്ലിക്ക് ചെയ്യുന്നു. ആ റിക്വസ്റ്റ് പൂർത്തിയാകാൻ നാല് സെക്കൻഡ് എടുക്കുന്നു. എന്നാൽ രണ്ട് സെക്കൻഡിന് ശേഷം ഉപയോക്താവ് 'back' ക്ലിക്ക് ചെയ്ത് ആ പേജ് വിട്ടുപോകുന്നു. റിക്വസ്റ്റ് പശ്ചാത്തലത്തിൽ (background) തുടർന്നു കൊണ്ടിരിക്കുന്നു. ഡാറ്റ ലഭിക്കുമ്പോൾ, നിലവിലില്ലാത്ത ഒരു 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 ബ്ലോക്ക് ഉപയോഗിക്കുക.
  • മനഃപൂർവ്വം റദ്ദാക്കിയവ (intentional cancellations) ഒഴിവാക്കാൻ എറർ പേര് AbortError ആണോ എന്ന് പരിശോധിക്കുക.
  • controller.abort() വിളിക്കുന്നതിനായി നിങ്ങളുടെ useEffect-ൽ ഒരു cleanup function റിട്ടേൺ ചെയ്യുക.

ഒരു component unmount ചെയ്യുമ്പോഴോ അല്ലെങ്കിൽ ഒരു dependency മാറുമ്പോഴോ ഈ രീതി ഫലപ്രദമായി പ്രവർത്തിക്കുന്നു.

ഈ രീതിയുടെ ഗുണങ്ങൾ:

  • പഴയ ഡാറ്റ പുതിയ ഡാറ്റയെ ഓവർറൈറ്റ് ചെയ്യുന്നത് തടയാം.
  • നിങ്ങളുടെ React ആപ്പിലെ memory leaks തടയാം.
  • ബ്രൗസർ നെറ്റ്‌വർക്ക് കണക്ഷനുകൾ ഫ്രീ ആക്കാം.
  • നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രവചിക്കാവുന്ന രീതിയിലുള്ളതും (predictable) സുസ്ഥിരവുമാക്കാം.

ഉറവിടം: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899