Co je useEffect a kdy se spustí?

Question

Accepted Answer

`useEffect` spouští **vedlejší efekty** — práci, která přesahuje vykreslování React, jako je načítání dat, odběry, časovače nebo ruční aktualizace DOM. Spustí se **po** vykreslení komponenty, aby vedlejší efekty zůstaly mimo tělo vykreslování (vykreslování musí zůstat čisté).

## Pole závislostí řídí načasování

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

- **`[count]`** → se spustí po prvním vykreslení a kdykoli se `count` změní.
- **`[]`** (prázdné) → se spustí **jednou** po připojení (dobré pro jednorázové nastavení).
- **vynechané** → se spustí po **každém** vykreslení (zřídka to, co chcete).

## Čištění: vrátit funkci

Jestliže efekt nastaví něco, co je třeba rozebrat, vraťte funkci čištění. React ji volá před dalším spuštěním efektu a když se komponenta odpojí:

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

## Proč čištění důležité

Bez něj by každé spuštění přidalo další časovač/odběr a nikdy by neodebralo starý — klasický memory leak. Životní cyklus efektu `[dep]` je: *spustit efekt → (změní se dep) → spustit čištění → spustit efekt znovu*.

**Tip:** nepoužívejte efekty pro věci, které můžete vypočítat během vykreslování (místo toho odvoďte hodnoty), a zahrňte do pole závislostí všechny hodnoty, které efekt čte (pravidlo lintingu `react-hooks/exhaustive-deps` pomáhá).