Panduan Penanganan Event di React

Apakah seluruh halaman web Anda memuat ulang saat Anda mengklik sebuah tombol? Apakah kotak input Anda gagal memperbarui state saat Anda mengetik? Anda mungkin menghadapi masalah ini jika tidak menangani event dengan benar di React.

Penanganan event berarti menangkap tindakan pengguna seperti klik, submit, atau perubahan dan meresponsnya. React menggunakan sistem yang disebut SyntheticEvent. Hal ini memastikan kode Anda bekerja dengan cara yang sama di semua browser seperti Chrome, Safari, dan Firefox.

Perbedaan utama antara event HTML dan React:

  • Penamaan: Gunakan camelCase di React. Gunakan onClick alih-alih onclick.
  • Handler: Teruskan referensi fungsi di React. Gunakan kurung kurawal alih-alih string.
  • Pencegahan: Selalu panggil event.preventDefault() untuk menghentikan perilaku default browser.

Cara React menangani event:

React tidak memasang listener pada setiap node. React menggunakan Event Delegation. React memasang satu listener tunggal pada elemen root. Hal ini menghemat memori dan meningkatkan performa.

Pola umum yang dapat digunakan:

  • Click Counter: Gunakan fungsi untuk memperbarui state saat pengguna mengklik tombol.
  • Form Handling: Gunakan event.target.name dan event.target.value untuk memperbarui beberapa field input dengan satu fungsi. Selalu gunakan event.preventDefault() pada saat pengiriman form untuk menghentikan pemuatan ulang halaman.
  • Passing Arguments: Jika Anda perlu mengirim ID ke sebuah fungsi, gunakan arrow function. Tulis onClick={() => handleDelete(id)}. Jangan tulis onClick={handleDelete(id)} karena fungsi tersebut akan langsung dijalankan saat render.

Hindari kesalahan berikut:

  • Infinite Loops: Jangan pernah memanggil fungsi secara langsung di dalam atribut onClick. Hal ini memicu pembaruan state selama render, yang menyebabkan render ulang.
  • Undefined Events: Selalu sertakan parameter event dalam definisi fungsi Anda jika Anda perlu memanggil preventDefault().
  • Memory Leaks: Jika Anda menambahkan listener manual seperti window.addEventListener di dalam hook useEffect, selalu hapus listener tersebut di dalam fungsi cleanup.

Praktik terbaik untuk performa:

  • Hindari membuat fungsi baru di dalam loop .map() jika daftar Anda sangat besar.
  • Gunakan hook useCallback saat meneruskan handler ke komponen anak.
  • Bersihkan custom event listener agar aplikasi Anda tetap cepat.

Menguasai event adalah kunci untuk membangun aplikasi React yang interaktif.

Sumber: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69