Ce este useEffect și când se execută?

Question

Accepted Answer

`useEffect` execută **efecte secundare** — lucru care iese din afara randării React, cum ar fi obținerea datelor, abonamente, timere sau actualizări manuale ale DOM-ului. Se execută **după** ce componenta se randează, ținând efectele secundare în afara corpului de randare (randarea trebuie să rămână pură).

## Matricea de dependențe controlează sincronizarea

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

- **`[count]`** → se execută după prima randare și ori de câte ori `count` se schimbă.
- **`[]`** (gol) → se execută **o singură dată** după montare (bun pentru configurare unică).
- **omis** → se execută după **fiecare** randare (rar ceea ce dorești).

## Curățare: returnați o funcție

Dacă un efect stabilește ceva care trebuie ștears, returnați o funcție de curățare. React o apelează înainte de următoarea execuție a efectului și când componenta este demontată:

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

## De ce curățarea este importantă

Fără ea, fiecare re-execuție ar adăuga un alt timer/abonament și nu ar elimina niciodată pe cel vechi — o scurgere de memorie clasică. Ciclu de viață pentru un efect `[dep]` este: *execută efect → (dep se schimbă) → execută curățare → execută efect din nou*.

**Sfat:** nu folosiți efecte pentru lucruri pe care le puteți calcula în timpul randării (derivati valorile în schimb) și includeți fiecare valoare pe care efectul o citește în matricea de dependențe (regula lint `react-hooks/exhaustive-deps` ajută).