𝗦𝘁𝗼𝗽 𝗥𝗮𝗰𝗲 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝘀 𝗪𝗶𝘁𝗵 𝗥𝗲𝗮𝗰𝘁 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿𝘀

𝗦𝘁𝗼𝗽 𝗥𝗮𝗰𝗲 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻𝘀 𝗪𝗶𝘁𝗵 𝗥𝗲𝗮𝗰𝘁 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿𝘀

Watumiaji hufanya kazi kwa kasi kwenye programu za wavuti. Kasi hii huleta matatizo mawili makuu kwa watengenezaji.

Tatizo la kwanza ni mtego wa "unmounted component". Mtumiaji anabonyeza kitufe ili kupata data. Ombi (request) huchukua sekunde nne. Baada ya sekunde mbili, mtumiaji anabonyeza kurudi na kuacha ukurasa huo. Ombi linaendelea nyuma ya pazia (background). Data inapofika, kodi inajaribu kusasisha component ambayo haipo tena. Hii husababisha uvujaji wa kumbukumbu (memory leaks).

Tatizo la pili ni "race condition". Hili hutokea mara kwa mara kwenye sehemu za kutafutia (search bars).

• Mtumiaji anaandika "A". Ombi la 1 linaanza.
• Mtumiaji anaandika "AB". Ombi la 2 linaanza.
• Ombi la 2 linamalizika kwanza na kuonyesha data sahihi.
• Ombi la 1 linamalizika kwa kuchelewa na kufuta data kwenye skrini ili kuweka data ya zamani.

Unaweza kutatua matatizo yote mawili kwa kutumia AbortController API. Chombo hiki kinakuwezesha kusitisha ombi la mtandao wakati halihitajiki tena.

Jinsi ya kuitumia:

• Tengeneza AbortController mpya ndani ya useEffect yako.
• Pitisha ishara ya controller (controller signal) kwenye ombi lako la fetch.
• Tumia kizuizi cha try/catch kushughulikia hitilafu.
• Angalia ikiwa jina la hitilafu ni AbortError ili kupuuza ughairi uliokusudiwa.
• Rudisha (return) kazi ya usafishaji (cleanup function) kwenye useEffect yako ili kuita controller.abort().

Mtindo huu hufanya kazi wakati component inapoondolewa (unmounts) au wakati utegemezi (dependency) unapobadilika.

Faida za njia hii:

• Unazuia data iliyopitwa na wakati isifute data mpya.
• Unazuia uvujaji wa kumbukumbu (memory leaks) kwenye programu yako ya React.
• Unatoa nafasi kwa miunganisho ya mtandao ya kivinjari.
• Programu yako inabaki kuwa thabiti na inayotabirika.

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