𝗛𝗲𝗻𝘁𝗶𝗸𝗮𝗻 𝗥𝗮𝗰𝗲 𝗖𝗼𝗻𝗱𝗶𝘁𝗶𝗼𝗻 𝗱𝗲𝗻𝗴𝗮𝗻 𝗥𝗲𝗮𝗰𝘁 𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿

Pengguna bergerak cepat di aplikasi web. Kecepatan ini menimbulkan dua masalah utama bagi pengembang.

Masalah pertama adalah jebakan komponen yang tidak terpasang (unmounted component). Seorang pengguna mengklik tombol untuk mengambil data. Permintaan tersebut memakan waktu empat detik. Setelah dua detik, pengguna mengklik kembali dan meninggalkan halaman. Permintaan tetap berjalan di latar belakang. Saat data tiba, kode mencoba memperbarui komponen yang sudah tidak ada lagi. Hal ini menyebabkan kebocoran memori (memory leaks).

Masalah kedua adalah race condition. Hal ini sering terjadi pada bilah pencarian (search bar).

  • Pengguna mengetik "A". Request 1 dimulai.
  • Pengguna mengetik "AB". Request 2 dimulai.
  • Request 2 selesai lebih dulu dan menampilkan data yang benar.
  • Request 1 selesai terlambat dan menimpa layar dengan data lama.

Anda dapat mengatasi kedua masalah tersebut dengan API AbortController. Alat ini memungkinkan Anda menghentikan permintaan jaringan ketika sudah tidak diperlukan lagi.

Cara mengimplementasikannya:

  • Buat AbortController baru di dalam useEffect Anda.
  • Teruskan signal dari controller ke permintaan fetch Anda.
  • Gunakan blok try/catch untuk menangani error.
  • Periksa apakah nama error adalah AbortError untuk mengabaikan pembatalan yang disengaja.
  • Kembalikan fungsi pembersihan (cleanup function) di dalam useEffect Anda untuk memanggil controller.abort().

Pola ini berfungsi saat komponen unmount atau saat dependensi berubah.

Keuntungan dari pendekatan ini:

  • Anda menghentikan data usang agar tidak menimpa data baru.
  • Anda mencegah kebocoran memori (memory leaks) pada aplikasi React Anda.
  • Anda membebaskan koneksi jaringan browser.
  • Aplikasi Anda tetap dapat diprediksi dan stabil.

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