Kaj je useEffect in kdaj se izvršuje?

Question

Accepted Answer

`useEffect` izvršuje **stranske učinke** — delo, ki izstopa iz Reactovega renderiranja, kot sta pridobivanje podatkov, naročila, časovniki ali ročne posodobitve DOM-a. Se izvrši **po** tem, ko se komponenta prikaže, in drži stranske učinke izven telesa renderiranja (renderiranje mora ostati čisto).

## Polje odvisnosti nadzira časovanje

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

- **`[count]`** → se izvrši po prvem renderiranju in kadarkoli se `count` spremeni.
- **`[]`** (prazno) → se izvrši **enkrat** po montaži (dobro za enkratno nastavitev).
- **izpuščeno** → se izvrši po **vsakem** renderiranju (redko tisto, kar želiš).

## Čiščenje: vrni funkcijo

Če učinek nastavi nekaj, kar je treba razstaviti, vrni funkcijo čiščenja. React jo pokliče pred naslednjo izvedbo učinka in ko je komponenta demontirana:

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

## Zakaj je čiščenje pomembno

Brez nje bi vsak ponoven zagon dodal še en časovnik/naročilo in nikoli ne bi odstranil starega — klasičen puščanje pomnilnika. Življenjski cikel za učinek `[dep]` je: *izvrši učinek → (odvisnost se spremeni) → izvrši čiščenje → izvrši učinek znova*.

**Nasvet:** ne uporabljaj učinkov za stvari, ki jih lahko izračunaš med renderiranjem (namesto tega izhaja vrednosti), in vključi vsako vrednost, ki jo učinek prebere, v polje odvisnosti (pravilo lintanja `react-hooks/exhaustive-deps` pomaga).