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

Pengguna bergerak pantas dalam aplikasi web. Kepantasan ini mewujudkan dua masalah utama bagi pembangun.

Masalah pertama ialah perangkap komponen yang tidak lagi dipasang (unmounted component). Seorang pengguna mengklik butang untuk mengambil data. Permintaan tersebut mengambil masa empat saat. Selepas dua saat, pengguna mengklik butang kembali dan meninggalkan halaman tersebut. Permintaan tersebut terus berjalan di latar belakang. Apabila data tiba, kod cuba mengemas kini komponen yang tidak lagi wujud. Ini menyebabkan kebocoran memori (memory leaks).

Masalah kedua ialah race condition. Ini sering berlaku pada bar carian.

  • Pengguna menaip "A". Permintaan 1 bermula.
  • Pengguna menaip "AB". Permintaan 2 bermula.
  • Permintaan 2 selesai dahulu dan memaparkan data yang betul.
  • Permintaan 1 selesai lewat dan menindih skrin dengan data lama.

Anda boleh menyelesaikan kedua-dua isu ini dengan API AbortController. Alat ini membolehkan anda menghentikan permintaan rangkaian apabila ia tidak lagi diperlukan.

Cara melaksanakannya:

  • Cipta AbortController baharu di dalam useEffect anda.
  • Hantar isyarat (signal) pengawal kepada permintaan fetch anda.
  • Gunakan blok try/catch untuk mengendalikan ralat.
  • Semak jika nama ralat ialah AbortError untuk mengabaikan pembatalan yang disengajakan.
  • Pulangkan fungsi pembersihan (cleanup function) dalam useEffect anda untuk memanggil controller.abort().

Corak ini berfungsi apabila komponen tidak lagi dipasang (unmounts) atau apabila terdapat perubahan pada dependensi.

Manfaat pendekatan ini:

  • Anda menghalang data lama daripada menindih data baharu.
  • Anda mencegah kebocoran memori dalam aplikasi React anda.
  • Anda membebaskan sambungan rangkaian pelayar.
  • Aplikasi anda kekal boleh diramal dan stabil.

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