Kas yra useEffect ir kada jis veikia?

Question

Accepted Answer

`useEffect` vykdo **šalinius efektus** — darbą, kuris eina už React renderavimo ribų, pvz. duomenų paėmimą, prenumeratas, laiko jungiklius arba rankinius DOM atnaujinimus. Jis veikia **po** komponento renderavimo, laikydamas šalinius efektus išėjus iš render kūno (render turi likti grynasis).

## Priklausomybių masyvas kontroliuoja laiką

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

- **`[count]`** → veikia po pirmojo renderavimo ir kiekvieną kartą, kai pasikeičia `count`.
- **`[]`** (tuščias) → veikia **vieną kartą** po montavimo (gera vienkartiniam nustatymui).
- **praleistas** → veikia po **kiekvieno** renderavimo (retai kas nori).

## Valymas: grąžinkite funkciją

Jei efektas ką nors nustato, ką reikia išmontuoti, grąžinkite valymą funkciją. React ją iškviečia prieš kitą efekto veikimą ir kai komponentas išmontuojamas:

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

## Kodėl valymas svarbus

Be jo, kiekvienas pakartojimas pridėtų dar vieną laiko jungiklį/prenumeratą ir niekada neišimtų senosios — klasikinis atminties nuotėkis. Ciklas efektui su `[dep]` yra: *vykdyti efektą → (dep pasikeičia) → vykdyti valymą → vykdyti efektą iš naujo*.

**Patarimas:** nenaudokite efektų dalykams, kuriuos galite apskaičiuoti renderavimo metu (nustatykite reikšmes vietoj to), ir įtraukite kiekvieną reikšmę, kurią efektas skaito, į priklausomybių masyvą (`react-hooks/exhaustive-deps` lint taisyklė padeda).