Što je `useEffect` i kada se pokreće?

Question

Accepted Answer

`useEffect` pokreće **sporedne efekte** — rad koji doseže izvan React rendera, kao što su dohvaćanje podataka, pretplate, tajmeri ili ručne DOM aktualizacije. Pokreće se **nakon** što komponenta renderira, zadržavajući sporedne efekte izvan tijela rendera (render mora biti čist).

## Niz ovisnosti kontrolira vremenske točke

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

- **`[count]`** → pokreće se nakon prvog rendera i kad god se `count` promijeni.
- **`[]`** (prazan) → pokreće se **jednom** nakon montiranja (dobro za jednokratnu konfiguraciju).
- **izostavljen** → pokreće se nakon **svakog** rendera (rijetko ono što trebaš).

## Čišćenje: vraćanje funkcije

Ako efekt postavi nešto što treba ukinuti, vrati funkciju čišćenja. React je poziva prije sljedećeg pokretanja efekta i kada komponenta bude demontirana:

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

## Zašto je čišćenje važno

Bez njega, svaki ponovno pokret dodao bi još jedan tajmer/pretplatu i nikad ne bi uklonio stari — klasičan curenje memorije. Životni ciklus efekta `[dep]` je: *pokreni efekt → (dep se promijeni) → pokreni čišćenje → pokreni efekt ponovno*.

**Savjet:** nemoj koristiti efekte za stvari koje možeš izračunati tijekom rendera (umjesto toga izvedu vrijednosti), i uključi svaku vrijednost koju efekt čita u nizu ovisnosti (pravilo `react-hooks/exhaustive-deps` pomaže).