Lupa hapus event listener? Awas memory leak! Yuk kita benahi bareng.

Photo by Marsha Dhita/Unsplash

Pernah nggak sih aplikasi web yang awalnya ngebut, lama lama jadi lemot terus nge lag? Atau bahkan tiba tiba browsernya crash sendiri? Wah, bisa jadi itu bukan karena jaringan internet yang lagi bapuk, tapi gara gara ada memory leak yang sembunyi di kode kita. Dan salah satu biang kerok yang paling sering nggak sengaja kita lupakan adalah event listener yang belum dihapus. Duh! Yuk, kita bongkar bareng misteri ini dan cari tahu gimana cara benahinnya biar aplikasi kita kembali ngebut dan asik dipakai.

Apa Sih Memory Leak Itu?

Gampangnya gini, memory leak itu kayak kita nyimpen barang di kamar, tapi lupa buang atau beresin lagi setelah nggak terpakai. Lama kelamaan, kamar jadi penuh sesak, susah gerak, dan akhirnya nggak bisa nampung barang baru lagi. Nah, di dunia programming, memory leak terjadi ketika ada bagian dari memori komputer yang sudah tidak diperlukan lagi oleh program kita, tapi sistem tidak bisa melepaskannya atau "membersihkannya". Jadi memori itu tetap terpakai, padahal harusnya sudah bisa dipakai buat hal lain.

Dalam konteks JavaScript di browser, ini artinya objek objek di memori yang harusnya sudah bisa di garbage collect atau dibuang oleh JavaScript engine, malah tetap bertahan. Kenapa bertahan? Karena masih ada referensi yang "megang" objek itu. Bayangin sebuah balon yang harusnya terbang bebas, tapi talinya masih dipegang sama kita, jadi dia nggak bisa terbang pergi. Ketika memori ini terus bertumpuk, aplikasi kita bakal jadi berat, lambat, bahkan bisa sampai crash. Tentu saja, ini pengalaman yang sangat tidak kita inginkan sebagai developer maupun pengguna.

Gimana Event Listener Bisa Jadi Biang Keladi Memory Leak?

Nah, sekarang kita bahas kenapa event listener sering jadi penyebab utama. Kita tahu event listener itu penting banget buat bikin website kita interaktif. Misalnya, ketika kita klik tombol, geser mouse, atau ketik sesuatu di input field, pasti ada event listener di baliknya yang "mendengarkan" dan merespons aksi kita. Kita biasanya pakai addEventListener untuk nempelin event listener ini ke elemen DOM atau objek JavaScript lainnya.

Masalahnya muncul ketika elemen DOM yang kita pasangi event listener itu dihapus dari halaman. Misalnya, kita punya modal pop up yang muncul pas diklik. Di dalam modal itu ada tombol "Tutup" yang punya event listener click. Ketika modalnya kita tutup, kadang kita cuma menghilangkan elemen modal dari DOM aja. Tapi, event listener yang nempel di tombol "Tutup" atau di elemen modal itu sendiri, seringkali lupa kita lepas atau hilangkan.

Kenapa ini jadi masalah? Meskipun elemen modalnya sudah hilang dari DOM, fungsi handler atau callback dari event listener itu mungkin masih menyimpan referensi ke elemen modal tersebut. JavaScript engine akan menganggap bahwa selama ada referensi yang masih "hidup" ke sebuah objek, objek itu tidak boleh di garbage collect. Alhasil, elemen modal dan mungkin juga objek objek lain yang terikat dengannya di dalam scope event listener itu, akan tetap nangkring di memori. Kalau ini terjadi berulang ulang, misalnya setiap kali kita buka tutup modal, memori yang terbuang akan semakin banyak dan inilah yang kita sebut memory leak.

Kejadian seperti ini sering banget kita temuin di Single Page Application SPA. Saat kita berpindah halaman atau component di SPA, seringkali component lama akan di unmount atau dihapus dari DOM. Kalau di component itu kita punya banyak event listener yang nempel dan lupa dihapus saat component di unmount, ya siap siap aja kena memory leak.

Skenario Umum yang Wajib Kita Waspadai

Ada beberapa situasi yang seringkali membuat kita lupa melepas event listener. Kita harus aware sama skenario skenario ini supaya bisa lebih teliti:

Komponen Dinamis dan SPA

Seperti yang kita bahas sebelumnya, di SPA atau aplikasi yang punya banyak komponen dinamis, misalnya di React, Vue, atau Angular. Ketika sebuah komponen dibuat atau di mount, kita sering banget nambahin event listener. Tapi pas komponen itu di destroy atau di unmount, kita lupa nih buat ngelepasnya. Setiap kali komponen itu di mount ulang tanpa membersihkan listener sebelumnya, kita menciptakan listener baru yang numpuk.

Ini juga kasus klasik. Kita bikin modal atau pop up, pasang event listener di tombol dalamnya atau bahkan di document untuk menutup modal jika user klik di luar. Setelah modal ditutup dan elemennya dihilangkan dari DOM, event listener yang nempel di document untuk menutup modal itu bisa jadi masih aktif. Kalau kita sering buka tutup modal, lama kelamaan listener ini akan menumpuk dan memakan memori.

Event Listener Global di `window` atau `document`

Kita sering pakai window.addEventListener atau document.addEventListener untuk event event global seperti scroll, resize, keydown, atau click di luar elemen tertentu. Ini asik banget buat bikin interaksi global. Tapi, karena nempel di objek global, listener ini akan terus ada selama halaman web kita terbuka. Kalau kita pasang listener ini di dalam scope suatu fungsi atau komponen yang sifatnya temporer dan kita lupa melepasnya, listener itu akan terus aktif bahkan setelah fungsi atau komponen tersebut selesai atau dihilangkan.

Event Listener Pada Elemen yang Sering Diupdate

Bayangin kita punya daftar item yang bisa di update dinamis. Setiap kali item baru ditambahkan, kita pasangi event listener. Tapi kalau kita membersihkan daftar itu dan membuat ulang, tanpa melepas listener dari item item yang lama, ya kita balik lagi ke masalah yang sama.

Dampaknya Ngeri Ngeri Sedap Lho!

Memory leak ini bukan cuma masalah buat developernya aja, tapi juga punya dampak langsung ke user.

Performa Aplikasi Jadi Lambat: Ini yang paling jelas terasa. Aplikasi jadi lemot, responsifitas menurun, bahkan bisa sampai nge lag parah. Pengguna tentu nggak suka aplikasi yang lemot.
Browser Crash: Kalau memory leaknya parah banget, browser bisa kehabisan memori dan akhirnya tab nya crash. Ini bikin user frustrasi dan meninggalkan aplikasi kita.
Baterai Boros: Di perangkat mobile, aplikasi yang boros memori juga boros baterai. Ini jelas bikin pengalaman pakai jadi nggak asik.
Pengalaman Pengguna Buruk: Semua dampak di atas bermuara pada satu hal pengalaman pengguna yang buruk. Mereka akan merasa aplikasi kita tidak profesional dan tidak nyaman digunakan.

Yuk Kita Benahi Bareng Strategi Pencegahan dan Perbaikan

Sekarang kita tahu kenapa memory leak itu bahaya, saatnya kita bahas gimana cara mencegah dan memperbaikinya. Ini dia beberapa strategi jitu yang bisa kita terapkan:

Metode Klasik `removeEventListener`

Ini adalah cara paling dasar dan paling penting. Setiap kali kita menambahkan event listener dengan addEventListener, kita harus punya rencana kapan dan bagaimana kita akan menghapusnya dengan removeEventListener.

Kuncinya adalah kita perlu menyimpan referensi ke fungsi handler yang sama persis saat kita menambahkan listener. Kita nggak bisa pakai fungsi anonim sebagai handler kalau mau dihapus, karena removeEventListener butuh referensi yang sama persis.

javascript
// Contoh yang benar
const tombolKlik = document.getElementById('tombolku');function handleKlikTombol() {
  console.log('Tombol diklik!');
}tombolKlik.addEventListener('click', handleKlikTombol);

Kalau kita pakai fungsi anonim:

javascript
// Contoh yang salah jika mau dihapus
const tombolLain = document.getElementById('tombolLain');
tombolLain.addEventListener('click', function() {
  console.log('Ini listener anonim.');
});

Karena fungsi anonim yang kita buat di removeEventListener itu dianggap sebagai fungsi yang berbeda oleh JavaScript, walaupun kodenya sama persis.

Solusi Modern `AbortController` untuk Beberapa Listener Sekaligus

AbortController adalah API browser yang relatif baru dan sangat powerful untuk mengelola event listener, terutama jika kita punya banyak listener yang perlu dihapus secara bersamaan atau di bawah kondisi tertentu. Ini asik banget buat membersihkan banyak listener dalam satu kali eksekusi.

Idenya adalah kita membuat sebuah AbortController instance, lalu kita passing properti signal dari controller ini ke opsi addEventListener. Kapanpun kita mau menghapus semua listener yang terikat dengan signal ini, kita tinggal panggil abort() di controller nya.

javascript
// Contoh dengan AbortController
const controller = new AbortController();
const signal = controller.signal;const elemenSatu = document.getElementById('elemenSatu');
const elemenDua = document.getElementById('elemenDua');elemenSatu.addEventListener('click', () => {
  console.log('Elemen satu diklik!');
}, { signal }); // kita kasih signal di sinielemenDua.addEventListener('mouseover', () => {
  console.log('Mouse di atas elemen dua!');
}, { signal }); // dan di sini juga

Ini sangat berguna di konteks framework seperti React di mana kita bisa pakai AbortController di dalam useEffect cleanup function.

Event Delegation Teknik Jitu Mengurangi Jumlah Listener

Event delegation adalah teknik yang sangat asik untuk mengelola event pada banyak elemen anak tanpa perlu memasang listener di setiap elemen. Kita cukup pasang satu listener di elemen induk, lalu kita manfaatkan event bubbling untuk mendeteksi event dari elemen anak.

Dengan event delegation, kita secara drastis mengurangi jumlah event listener yang ada di DOM, sehingga risiko memory leak juga berkurang.

javascript
// Contoh event delegation
const daftarItem = document.getElementById('daftarItem'); // Elemen indukdaftarItem.addEventListener('click', (event) => {
  if (event.target.classList.contains('item')) {
    console.log('Item diklik:', event.target.textContent);
  }
});

Dengan cara ini, kita hanya punya satu listener di daftarItem, terlepas dari berapa banyak item yang ada di dalamnya, atau seberapa sering item tersebut ditambahkan atau dihapus.

Opsi `once: true` untuk Listener Sekali Pakai

Kalau kita tahu listener itu cuma perlu aktif sekali seumur hidup elemennya, kita bisa pakai opsi once: true di addEventListener. Ini akan secara otomatis menghapus listener setelah event pertama kali terpicu. Praktis banget kan?

javascript
const tombolSekali = document.getElementById('tombolSekali');tombolSekali.addEventListener('click', () => {
  console.log('Tombol ini hanya bisa diklik sekali!');
}, { once: true });

Solusi dari Framework Modern

Kalau kita pakai framework seperti React, Vue, atau Angular, masing masing sudah punya cara asik sendiri untuk mengelola lifecycle dan cleanup.

React: Gunakan useEffect dengan fungsi cleanup. Apapun yang di return dari useEffect akan dieksekusi saat komponen di unmount.

javascript
    // Contoh pseudo kode React
    useEffect(() => {
      // Pasang listener di sini
      const handleResize = () => console.log('Ukuran berubah');
      window.addEventListener('resize', handleResize);

Vue: Gunakan lifecycle hook seperti onMounted dan onUnmounted.

javascript
    // Contoh pseudo kode Vue (Composition API)
    onMounted(() => {
      const handleScroll = () => console.log('Scroll terjadi');
      window.addEventListener('scroll', handleScroll);
    });

Angular: Gunakan ngOnDestroy lifecycle hook. Kita bisa pakai takeUntil dari RxJS untuk auto unsubscribe.

javascript
    // Contoh pseudo kode Angular
    ngOnDestroy() {
      // Hapus listener di sini, atau unsubscribe dari observable
    }

Memanfaatkan fitur framework ini adalah cara yang paling direkomendasikan jika kita bekerja dengan mereka, karena sudah terbukti ampuh dan terintegrasi dengan baik.

Deteksi Dini itu Penting! Alat Bantu untuk Memburu Memory Leak

Oke, kita sudah tahu caranya mencegah, tapi kadang memory leak itu licik dan susah ketahuan. Untungnya, browser modern punya alat bantu asik buat kita berburu memory leak.

Chrome DevTools Memory Tab: Ini adalah senjata utama kita. Di tab Memory, kita bisa ambil heap snapshot, yang akan menampilkan semua objek di memori pada suatu waktu. Kita bisa ambil dua snapshot (sebelum dan sesudah aksi yang dicurigai memicu leak), lalu bandingkan untuk melihat objek apa saja yang bertambah dan tidak berkurang. Kita juga bisa lihat object retention tree untuk mengetahui siapa yang masih memegang referensi ke objek yang bocor.
Performance Monitor: Di tab Performance di DevTools juga ada grafik JS heap yang bisa kita pantau. Kalau grafiknya terus naik dan tidak pernah turun meskipun seharusnya memori sudah dibersihkan, itu bisa jadi indikasi kuat adanya memory leak.
Leak Canary Library: Ada beberapa library JavaScript yang didesain khusus untuk membantu mendeteksi memory leak. Walaupun nggak sepopuler DevTools, ini bisa jadi opsi tambahan di lingkungan development kita.

Dengan rajin menggunakan alat alat ini dan membiasakan diri untuk profiling aplikasi, kita bisa menemukan dan memperbaiki memory leak sebelum mereka jadi masalah besar di produksi.

Yuk Kita Jadikan Kebiasaan Baik!

Menghapus event listener itu sama pentingnya dengan menambahkannya. Ini adalah bagian fundamental dari menjaga kesehatan dan performa aplikasi web kita. Dengan menerapkan kebiasaan membersihkan event listener secara konsisten, entah itu dengan removeEventListener klasik, AbortController, event delegation, opsi once, atau memanfaatkan fitur cleanup dari framework, kita tidak hanya mencegah memory leak tapi juga membangun aplikasi yang lebih tangguh, efisien, dan memberikan pengalaman pengguna yang lebih asik.

Ingat, sedikit kelupaan di sana sini bisa menumpuk jadi masalah besar di kemudian hari. Jadi, yuk mulai dari sekarang, setiap kali kita menambah event listener, kita juga langsung pikirkan kapan dan bagaimana kita akan menghapusnya. Bersih bersih memori itu penting, sama pentingnya dengan bersih bersih kode kita sendiri. Mari kita benahi bareng biar aplikasi kita selalu ngebut dan anti lemot!