𝗥𝗲𝗮𝗰𝘁 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿𝘀 மூலம் 𝗥𝗮𝗰𝗲 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝘀-ஐத் தடுங்கள்

இணையப் பயன்பாடுகளில் (web apps) பயனர்கள் மிக வேகமாகச் செயல்படுகிறார்கள். இந்த வேகம் டெவலப்பர்களுக்கு இரண்டு முக்கியப் பிரச்சனைகளை உருவாக்குகிறது.

முதல் பிரச்சனை 'unmounted component trap' ஆகும். ஒரு பயனர் தரவைப் பெற (fetch) ஒரு பொத்தானைக் கிளிக் செய்கிறார். அந்தத் தரவுப் பரிமாற்றம் (request) நான்கு வினாடிகள் எடுக்கும். இரண்டு வினாடிகளுக்குப் பிறகு, பயனர் 'back' பொத்தானைக் கிளிக் செய்து பக்கத்தை விட்டு வெளியேறுகிறார். ஆனால் அந்தத் தரவுப் பரிமாற்றம் பின்னணியில் (background) தொடர்ந்து கொண்டே இருக்கும். தரவு வந்தடையும் போது, ஏற்கனவே இல்லாத ஒரு component-ஐப் புதுப்பிக்க (update) குறியீடு (code) முயற்சிக்கும். இது memory leaks-க்கு வழிவகுக்கும்.

இரண்டாவது பிரச்சனை 'race condition' ஆகும். இது பெரும்பாலும் தேடல் பட்டிகளில் (search bars) நிகழ்கிறது.

  • ஒரு பயனர் "A" என்று தட்டச்சு செய்கிறார். Request 1 தொடங்குகிறது.
  • ஒரு பயனர் "AB" என்று தட்டச்சு செய்கிறார். Request 2 தொடங்குகிறது.
  • Request 2 முதலில் முடிந்து சரியான தரவைக் காட்டுகிறது.
  • Request 1 தாமதமாக முடிந்து, பழைய தரவைக் கொண்டு திரையை மாற்றியமைக்கிறது (overwrites).

AbortController API மூலம் நீங்கள் இந்த இரண்டு சிக்கல்களையும் சரிசெய்யலாம். இந்தத் கருவி, ஒரு network request இனித் தேவையில்லை எனும் போது அதை நிறுத்த அனுமதிக்கிறது.

இதை எவ்வாறு செயல்படுத்துவது:

  • உங்கள் useEffect-க்குள் ஒரு புதிய AbortController-ஐ உருவாக்கவும்.
  • உங்கள் fetch request-க்கு controller.signal-ஐ அனுப்பவும்.
  • பிழைகளைக் கையாள (handle) ஒரு try/catch block-ஐப் பயன்படுத்தவும்.
  • திட்டமிட்டு நிறுத்தப்பட்ட (intentional cancellations) நிகழ்வுகளைத் தவிர்க்க, பிழையின் பெயர் AbortError தானா என்று சரிபார்க்கவும்.
  • controller.abort()-ஐ அழைக்க உங்கள் useEffect-இல் ஒரு cleanup function-ஐத் திருப்பியனுப்பவும் (return).

ஒரு component unmount ஆகும்போது அல்லது ஒரு dependency மாறும்போது இந்த முறை வேலை செய்யும்.

இந்த அணுகுமுறையின் நன்மைகள்:

  • பழைய தரவு புதிய தரவை மாற்றியமைப்பதைத் தடுக்கலாம்.
  • உங்கள் React app-இல் memory leaks ஏற்படுவதைத் தவிர்க்கலாம்.
  • பிரவுசர் network இணைப்புகளை விடுவிக்கலாம் (free up).
  • உங்கள் பயன்பாடு (application) கணிக்கக்கூடியதாகவும் (predictable) நிலையானதாகவும் (stable) இருக்கும்.

ஆதாரம்: https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899