Co to jest useEffect i kiedy się uruchamia?

Question

Accepted Answer

`useEffect` uruchamia **efekty uboczne** — pracę, która wychodzi poza renderowanie Reacta, taką jak pobieranie danych, subskrypcje, timery lub ręczne aktualizacje DOM. Uruchamia się **po** wyrenderowaniu komponentu, trzymając efekty uboczne poza ciałem render (render musi być czysty).

## Dlaczego to ważne

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

- **`[count]`** → uruchamia się po pierwszym renderze i za każdym razem, gdy `count` się zmieni.
- **`[]`** (pusta) → uruchamia się **raz** po montażu (dobre do jednorazowej konfiguracji).
- **pominięta** → uruchamia się po **każdym** renderze (rzadko to, czego chcesz).

## Czyszczenie: zwróć funkcję

Jeśli efekt ustawia coś, co wymaga rozłożenia, zwróć funkcję czyszczenia. React wywoła ją przed następnym uruchomieniem efektu i gdy komponent się odmontuje:

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

## Dlaczego czyszczenie jest ważne

Bez niego każde re-uruchomienie dodałoby kolejny timer/subskrypcję i nigdy nie usunęło starego — klasyczny wyciek pamięci. Cykl życia dla efektu `[dep]` to: *uruchom efekt → (dep się zmienia) → uruchom czyszczenie → uruchom efekt ponownie*.

**Wskazówka:** nie używaj efektów do rzeczy, które możesz obliczyć podczas renderowania (zamiast tego derive wartości), i dołącz każdą wartość, którą efekt czyta w tablicy zależności (reguła lintowania `react-hooks/exhaustive-deps` pomaga).