useEffect: Efek Samping

Apa itu efek samping?

Render harus murni: hanya menghitung JSX dari props & state. Tetapi aplikasi nyata juga perlu hal di luar render:

• mengubah document.title
• mengambil data dari server
• memasang timer atau event listener
• menyimpan ke localStorage

Itu disebut efek samping dan ditaruh di useEffect.

Bentuk dasar

import { useEffect } from "react";

function Halaman() {
  const [klik, setKlik] = useState(0);

  useEffect(() => {
    document.title = `Klik: ${klik}`;
  }, [klik]);

  return <button onClick={() => setKlik(klik + 1)}>Klik {klik}</button>;
}

Effect dijalankan setelah React menggambar layar.

Array dependency

Argumen kedua mengatur kapan effect dijalankan ulang:

Semua nilai reaktif (props/state) yang dipakai di dalam effect harus tercantum di array. Tool ESLint react-hooks/exhaustive-deps membantu memeriksanya.

Cleanup: membereskan setelah selesai

Return sebuah function untuk membersihkan (hapus listener, hentikan timer):

useEffect(() => {
  const id = setInterval(() => console.log("tik"), 1000);
  return () => clearInterval(id);   // dijalankan saat unmount atau sebelum effect berikutnya
}, []);

Tanpa cleanup, timer menumpuk dan memori bocor.

StrictMode di development

Di mode development, StrictMode menjalankan effect dua kali (mount → cleanup → mount) untuk membantu menemukan cleanup yang hilang. Itu normal dan tidak terjadi di produksi.

Kapan TIDAK memerlukan effect?

• Menghitung nilai dari state/props → hitung saja saat render.
• Menanggapi klik pengguna → taruh di event handler.

Menurut dokumentasi React: "You Might Not Need an Effect". Pakai effect untuk sinkronisasi dengan sistem eksternal.

Jebakan: loop tak berujung

useEffect(() => {
  setData([...]);     // mengubah state di dalam effect tanpa dependency
});                    // → render → effect → render → ...

Selalu pasang dependency yang tepat.