PostsNow
cover image for this post
1 March 2022

Komunikasi Antar Komponen dengan Custom Event

Pernahkah anda mengalami masalah menghubungkan dua atau lebih komponen yang secara kode letaknya jauh? Malas membuat state management di tingkat yang sangat tinggi hanya untuk kontrol buka-tutup sesuatu? Tidak mau ribet memasang library eksternal untuk mengatur state tersebut? Jangan khawatir, ada solusi bawaan dari platform web untuk hal tersebut.

Contoh Kasus Imajiner

Bayangkan kita memiliki sebuah toko online berbasis React dimana di tiap halamannya terdapat sebuah header dengan dropdown untuk mengganti kurs mata uang. Komponen header ini menjadi sebuah template yang akan diaplikasikan di semua halaman.

Tampilan layout header

Contoh layout header

Komponen header ini berdiri bebas dan tidak terikat oleh isi halaman. Apapun isi halamannya, header tidak terlalu peduli.

Pada suatu hari, muncullah sebuah permintaan.

Di halaman pembayaran, bisa nggak ya kita munculin sebuah tombol yang ketika diklik akan membuka dropdown yang ada di header supaya pengguna bisa ganti kurs?

Gambaran fitur

Contoh simulasi fitur yang diinginkan

Apakah mungkin? Tentu pastinya secara teknis hal ini memungkinkan. Yang jadi masalah biasanya adalah kita bingung bagaimana mencapai ini tanpa mengubah banyak hal.

Ada beberapa cara yang mungkin terpikirkan:

  1. Memasang state dan fungsi untuk membuka-tutup dropdown. Solusi yang simpel untuk dipikirkan. Dapat pula dicapai dengan React Context tapi kita harus membuat sebuah fungsi dan logika yang terletak di level yang setara atau di atas template halaman.
  2. Menggunakan library eksternal untuk memengatur state. Ada banyak alternatif seperti redux, zustand, jotai dan lain sebagainya. Sayangnya kadang kita merasa bahwa ini adalah solusi yang overkill.

Tidak ada yang salah dari dua solusi di atas, tapi menurut pengalaman pribadi di beberapa kondisi kadang tidak semudah itu untuk memasang state di level yang sangat atas ataupun sebebas itu untuk menambahkan library. Solusinya adalah dengan menggunakan fitur bawaan web: Custom Event.

Custom Event

Pada dasarnya interaksi di browser didasari oleh event yang dikirimkan dan yang ditangkap. Nama-nama event pun biasanya sudah terdefinisi dan sering kita gunakan baik secara langsung maupun tidak. Event yang biasa terjadi misalnya adalah:

  • Ketika ada sebuah elemen yang diklik - onClick, "click"
  • Ketika menekan sebuah tombol pada keyboard - onKeyPress, "keypress"
  • Ketika laman web selesai dimuat - onLoad, "load"
  • dan lain sebagainya

Dari contoh-contoh di atas, kita bisa memahami bahwa Event yang tersedia sudah terdefinisi di web platform. Di sinilah perbedaanya dengan CustomEvent, yang mana kita bisa mendefiniskan sebuah event buatan kita sendiri untuk bisa ditangkap oleh sebuah komponen.

Di tombol di halaman checkout, kita dapat menulis logika untuk mengirimkan custom event.

// CheckoutPage.js
const handleChangeCurrencyClick = () => {
  const dropdownEvent = new CustomEvent("toggleCurrencyDropdown", {
    detail: true,
  });
  document.dispatchEvent(dropdownEvent);
}

...

<button onClick={handleChangeCurrencyClick}>Change Currency</button>

Kemudian di komponen header, kita menambahkan event listener untuk menangkap custom event yang telah kita kirim.

// Header.js
const [isDropdownOpened, setDropdownOpened] = useState(false);

const handleDropdownEvent = (e) => {
  const shouldDropdownOpen = e.detail;
  setDropdownOpened(shouldDropdownOpen);
};

useEffect(() => {
  document.addEventListener("toggleCurrencyDropdown", handleDropdownEvent);
  return () => {
    document.removeEventListener("toggleCurrencyDropdown", handleDropdownEvent);
  };
}, [handleDropdownEvent]);

Penjelasan

Di sini kita memberi nama event kita dengan "toggleCurrencyDropdown" yang sebenarnya bisa kita beri nama dengan apapun asalkan tidak menggunakan nama event yang sudah ada agar tidak terjadi konflik.

Ketika mendefinisikan custom event, kita juga dapat mengirimkan parameter dalam field detail yang dalam hal ini berisi boolean untuk mengatur buka tutupnya dropdown.

Di komponen header kita memasang sebuah event listener untuk menangkap event "toggleCurrencyDropdown" yang telah kita kirimkan. Ketika event tersebut terjadi, kita membaca parameter yang dikirimkan di dalamnya untuk menentukan state dari dropdown.

Akhir Kata

Custom Event di sini tidak selalu cara terbaik, bisa jadi ada cara lain yang lebih baik tergantung kondisi keseluruhan kode. Namun kadang ini dapat digunakan sebagai jalan keluar (escape hatch) ketika mengalami kebuntuan-kebutuan tertentu. Hal ini juga sebagai pengingat bahwa sudah cukup banyak juga utilitas bawaan yang tersedia di web platform.

Daftar tautan terkait: