Cleanup Effect: Jangan Lupa Beres-Beres! - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Cleanup Effect?

Saat kita menggunakan useEffect di React, kita sering menjalankan kode untuk efek samping, seperti memanggil API, mengatur event listener, atau menggunakan interval. Tapi, apa yang terjadi jika efek ini terus berjalan bahkan setelah komponen hilang dari layar? Nah, di sinilah cleanup effect berperan!

2. Kenapa Perlu Cleanup Effect?

Tanpa cleanup, efek samping bisa menyebabkan:  Memory leak (memori terus terpakai tanpa dibersihkan).  Event listener bertumpuk (sehingga fungsi dipanggil berulang kali tanpa sadar). Interval atau timeout yang tetap berjalan, meskipun komponen sudah tidak ada.

3. Cara Menggunakan Cleanup Effect di useEffect

Kita bisa membersihkan efek samping dengan mengembalikan sebuah fungsi di dalam useEffect. Fungsi ini akan dijalankan sebelum komponen dihapus dari layar.

import { useEffect } from "react";

const KomponenDenganCleanup = () => {
  useEffect(() => {
    console.log("Komponen muncul!");
    return () => console.log("Komponen hilang, bersih-bersih dulu!");
  }, []);

  return <h1>Halo, Dunia!</h1>;
};

Apa yang terjadi di sini?

• Saat komponen muncul, kita mencetak "Komponen muncul!".
• Saat komponen dihapus, kita mencetak "Komponen hilang, bersih-bersih dulu!".

4. Contoh Cleanup untuk Event Listener

Kita bisa membersihkan event listener agar tidak bertumpuk.

import { useEffect } from "react";

const MouseTracker = () => {
  useEffect(() => {
    const logMouseMove = (e) => console.log(`Mouse di (${e.clientX}, ${e.clientY})`);
    window.addEventListener("mousemove", logMouseMove);

    return () => window.removeEventListener("mousemove", logMouseMove);
  }, []);

  return <h1>Gerakkan mouse Anda!</h1>;
};

Kenapa perlu removeEventListener?

• Agar event listener tidak terus berjalan meskipun komponen sudah hilang.
• Tanpa cleanup, event listener akan terus menumpuk setiap kali komponen muncul kembali.

5. Contoh Cleanup untuk Interval

Misalnya kita membuat timer yang terus berjalan:

import { useState, useEffect } from "react";

const Timer = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);

    return () => clearInterval(interval); // Bersihkan interval saat komponen dihapus
  }, []);

  return <h1>Waktu: {count}</h1>;
};

Kenapa harus clearInterval(interval)?

• Jika tidak dibersihkan, interval akan terus berjalan meskipun komponen sudah dihapus.
• Bisa menyebabkan peningkatan konsumsi memori yang tidak perlu.

6. Kesimpulan

 Gunakan cleanup effect dengan return () => {...} di dalam useEffect.  Bersihkan event listener dengan removeEventListener agar tidak bertumpuk.  Hapus interval atau timeout dengan clearInterval atau clearTimeout agar tidak boros memori.  Pastikan semua efek samping yang perlu dibersihkan sudah ditangani dengan baik!

Jadi, jangan lupa beres-beres ya kalau pakai useEffect! Biar aplikasi tetap ringan dan efisien!