Apa itu `useEffect` dan kapan hal itu berjalan?

Question

Accepted Answer

`useEffect` menjalankan **efek samping** — pekerjaan yang menjangkau di luar render React, seperti pengambilan data, langganan, timer, atau pembaruan DOM manual. Itu berjalan **setelah** komponen render, menjaga efek samping keluar dari tubuh render (render harus tetap murni).

## Mengapa ini penting

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → berjalan setelah render pertama dan kapan pun `count` berubah.
- **`[]`** (kosong) → berjalan **sekali** setelah mount (baik untuk penyiapan satu kali).
- **dihilangkan** → berjalan setelah **setiap** render (jarang yang Anda inginkan).

## Pembersihan: mengembalikan fungsi

Jika efek menyiapkan sesuatu yang perlu dicopot, kembalikan fungsi pembersihan. React memanggilnya sebelum efek berikutnya dijalankan dan saat komponen tidak dipasang:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Mengapa pembersihan penting

Tanpanya, setiap jalankan ulang akan menambahkan timer/langganan lain dan tidak akan pernah menghapus yang lama — kebocoran memori klasik. Siklus hidup untuk efek `[dep]` adalah: *jalankan efek → (dep berubah) → jalankan pembersihan → jalankan efek lagi*.

**Tip:** jangan gunakan efek untuk hal-hal yang dapat Anda hitung selama render (turunkan nilai sebagai gantinya), dan sertakan setiap nilai yang dibaca efek dalam susunan dependensi (aturan `react-hooks/exhaustive-deps` membantu).