Mikä on useEffect ja milloin se suoritetaan?

Question

Accepted Answer

`useEffect` suorittaa **sivuvaikutuksia** — työtä, joka ulottuu Reactin renderöinnin ulkopuolelle, kuten tietojen noutaminen, tilaukset, ajastimet tai manuaaliset DOM-päivitykset. Se suoritetaan **komponentin renderöinnin jälkeen**, pitäen sivuvaikutukset renderöintirungon ulkopuolella (renderöinnin on pysyttävä puhtaana).

## Riippuvuustaulukko ohjaa ajoitusta

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

- **`[count]`** → suoritetaan ensimmäisen renderöinnin jälkeen ja aina kun `count` muuttuu.
- **`[]`** (tyhjä) → suoritetaan **kerran** liitettävän jälkeen (hyvä kertakertaiseen asetukseen).
- **jätetty pois** → suoritetaan jokaisen renderöinnin **jälkeen** (harvoin se, mitä haluat).

## Siivous: palauta funktio

Jos efekti asettaa jotain, joka on purettava, palauta siivousfunktio. React kutsuu sitä ennen seuraavaa efektin suorittamista ja kun komponentti irrotetaan:

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

## Miksi siivous on tärkeää

Ilman sitä jokainen uudelleensuoritus lisäisi toisen ajastimen/tilauksen eikä koskaan poistaisi vanhaa — klassinen muistivuoto. `[dep]` effektin elinkaari on: *suorita efekti → (dep muuttuu) → suorita siivous → suorita efekti uudelleen*.

**Vinkki:** älä käytä efektejä asioihin, jotka voit laskea renderöinnin aikana (johda arvot sen sijaan), ja sisällytä kaikki arvot, joita efekti lukee, riippuvuustaulukkoon (`react-hooks/exhaustive-deps` lintisääntö auttaa).