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

ผู้ใช้งานเว็บแอปพลิเคชันมักจะใช้งานอย่างรวดเร็ว ซึ่งความเร็วนี้สร้างปัญหาหลักสองประการให้กับนักพัฒนา

ปัญหาแรกคือกับดัก unmounted component เมื่อผู้ใช้คลิกปุ่มเพื่อดึงข้อมูล (fetch data) และการร้องขอ (request) นั้นใช้เวลา 4 วินาที แต่หลังจากผ่านไปเพียง 2 วินาที ผู้ใช้กลับคลิกย้อนกลับและออกจากหน้านั้นไปแล้ว แต่การร้องขอยังคงทำงานอยู่เบื้องหลัง และเมื่อข้อมูลมาถึง โค้ดจะพยายามอัปเดต component ที่ไม่มีอยู่แล้ว ซึ่งส่งผลให้เกิด memory leaks

ปัญหาที่สองคือ race condition ซึ่งมักเกิดขึ้นบ่อยในช่องค้นหา (search bars)

  • ผู้ใช้พิมพ์ "A" -> Request 1 เริ่มทำงาน
  • ผู้ใช้พิมพ์ "AB" -> Request 2 เริ่มทำงาน
  • Request 2 ทำงานเสร็จก่อนและแสดงข้อมูลที่ถูกต้อง
  • Request 1 ทำงานเสร็จทีหลังและเขียนทับหน้าจอด้วยข้อมูลเก่า

คุณสามารถแก้ไขทั้งสองปัญหานี้ได้ด้วย AbortController API ซึ่งเป็นเครื่องมือที่ช่วยให้คุณหยุดการร้องขอเครือข่าย (network request) เมื่อไม่จำเป็นต้องใช้งานแล้ว

วิธีการนำไปใช้งาน:

  • สร้าง AbortController ตัวใหม่ภายใน useEffect ของคุณ
  • ส่ง controller.signal ไปยัง fetch request ของคุณ
  • ใช้ try/catch block เพื่อจัดการกับ error
  • ตรวจสอบว่าชื่อ error คือ AbortError หรือไม่ เพื่อข้ามการยกเลิกที่ตั้งใจไว้ (intentional cancellations)
  • return cleanup function ใน useEffect เพื่อเรียกใช้ controller.abort()

รูปแบบนี้จะทำงานเมื่อ component ถูก unmount หรือเมื่อ dependency มีการเปลี่ยนแปลง

ประโยชน์ของแนวทางนี้:

  • หยุดไม่ให้ข้อมูลที่ล้าสมัยมาเขียนทับข้อมูลใหม่
  • ป้องกันการเกิด memory leaks ใน React app ของคุณ
  • ช่วยคืนทรัพยากรการเชื่อมต่อเครือข่ายของเบราว์เซอร์
  • ทำให้แอปพลิเคชันของคุณทำงานได้อย่างคาดเดาได้และมีความเสถียร

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