Apakah useEffect dan bilakah ia dijalankan?

Question

Accepted Answer

`useEffect` menjalankan **kesan sampingan (side effects)** — kerja yang menjangkau di luar proses rendering React, seperti pengambilan data, langganan, pemasa, atau kemas kini DOM secara manual. Ia dijalankan **selepas** komponen di-render, lalu memastikan kesan sampingan kekal di luar badan render (render mesti tulen).

## Array kebergantungan mengawal masa

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

- **`[count]`** → dijalankan selepas render pertama dan setiap kali `count` berubah.
- **`[]`** (kosong) → dijalankan **sekali** selepas mount (sesuai untuk persediaan sekali sahaja).
- **ditiadakan** → dijalankan selepas **setiap** render (jarang sekali ini yang anda mahukan).

## Pembersihan (cleanup): kembalikan sesuatu fungsi

Jika sesuatu effect menyediakan sesuatu yang perlu dibubarkan, kembalikan fungsi pembersihan. React memanggilnya sebelum effect dijalankan semula dan apabila komponen di-unmount:

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

## Mengapa pembersihan penting

Tanpanya, setiap kali ia dijalankan semula akan menambah satu lagi pemasa/langganan dan tidak pernah membuang yang lama — kebocoran memori klasik. Kitaran hayat bagi sesuatu effect `[dep]` ialah: *jalankan effect → (dep berubah) → jalankan cleanup → jalankan effect semula*.

**Petua:** jangan gunakan effect untuk perkara yang boleh anda kira semasa render (terbitkan nilai sebaliknya), dan masukkan setiap nilai yang dibaca oleh effect ke dalam array kebergantungan (peraturan lint `react-hooks/exhaustive-deps` membantu).