Mengenal Memory Leak di JavaScript dan Cara Mencegahnya

Kebocoran yang Menghabiskan RAM Pengguna

JavaScript memiliki robot pembersih otomatis yang disebut Garbage Collector (Pengumpul Sampah). Jika sebuah variabel atau data sudah tidak dipakai lagi oleh aplikasimu, robot ini akan membuangnya dari memori (RAM) agar browser pengunjung tetap ringan.

Lalu, apa itu Memory Leak (Kebocoran Memori)?
Ini terjadi ketika ada sekumpulan data/fungsi yang sebenarnya sudah tidak terpakai, TAPI secara tidak sengaja kodemu "menguncinya" sehingga robot Garbage Collector tidak berani membuangnya. Akibatnya, RAM browser semakin lama semakin penuh hingga akhirnya komputer menjadi *hang* (Nge-lag) dan *Browser* terpaksa membunuh tab halaman tersebut (Aw, Snap!).

Penyebab Utama 1: Event Listener yang Terlupakan

Ini adalah kesalahan nomor satu di React.

• Kamu masuk ke Halaman "Galeri", lalu komponen React-mu memasang alat pendeteksi gulir layar: window.addEventListener('scroll', hitungPosisi).
• Kamu lalu berpindah ke Halaman "Profil". Komponen Galeri hancur dan hilang dari layar.
• Masalahnya: Karena kamu tidak menyuruh browser untuk melepas detektor scroll tersebut, fungsi hitungPosisi akan terus menyala dan memakan memori di latar belakang, meskipun halaman Galeri-nya sudah tidak ada! Jika kamu bolak-balik buka halaman Galeri 10 kali, fungsi itu akan jalan dobel 10 kali secara bersamaan!

Cara Mencegah (Cleanup Function)

Selalu sediakan "Fungsi Pembersih" sebelum sebuah komponen pergi. Di React (menggunakan useEffect Hook), kamu harus melakukan fungsi pembersihan (Cleanup) pada nilai return-nya:

useEffect(() => {
  // 1. Memasang detektor saat masuk halaman
  window.addEventListener('scroll', hitungPosisi);

  // 2. Fungsi Pembersih saat akan keluar halaman
  return () => {
    window.removeEventListener('scroll', hitungPosisi);
  };
}, []);

Penyebab 2: setInterval yang Terus Berdetak

Mirip dengan *Event Listener*, jika kamu membuat fitur Timer (Jam Hitung Mundur) dengan menggunakan fungsi bawaan setInterval(), jam tersebut tidak akan berhenti berdetak meskipun kamu sudah menutup halaman (komponen) tersebut. Ia akan jalan selamanya (Infinite Loop) memakan CPU!

Solusinya: Selalu simpan ID intervalnya ke dalam variabel (const timer = setInterval(...)), lalu hancurkan timer tersebut saat *user* pindah halaman menggunakan perintah clearInterval(timer).