Mitä ovat yleisiä sudenkuoppia useEffect-riippuvuustaulukossa ja siivouksessa?

Question

Accepted Answer

Efekti suoritetaan uudelleen sen **riippuvuuksien** perusteella, ja tämän taulukon väärinkäyttö on #1 React-virheiden lähde.

## Miksi tämä on tärkeää

### Sudenkuoppa 1: puuttuvat riippuvuudet → vanhat arvot

Efekti sulkee itseensä arvot renderistä, jossa se luotiin. Jos jätät riippuvuuden pois, se jatkaa vanhan arvon käyttöä:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

Korjaus: joko lisää `count` depsiin, tai käytä funktiota päivittävää updateria, joka ei tarvitse sitä (`setCount(c => c + 1)`).

### Sudenkuoppa 2: epävakaita riippuvuuksia → efekti suoritetaan jokaisen renderin yhteydessä

Objektit/taulukot/funktiot luodaan uudelleen jokaisen renderin yhteydessä, joten ne ovat "uusia" joka kerta ja efekti ei koskaan vakiinnu:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

Korjaus: riippuu primitiivisestä (`[id]`), tai muistuta käyttämällä `useMemo`/`useCallback`.

### Sudenkuoppa 3: unohdettu siivous → vuodot ja kilpailutilanteet

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Ilman siivoustoimintoja vanhempi hidas pyyntö voisi ratkaista *sen jälkeen* kun uudempi on ratkaistu ja korvaa tuoreet tiedot (kilpailutilanne), ja tilaukset/ajastimet kerääntyisivät. ESLint-sääntö `react-hooks/exhaustive-deps` havaitsee useimmat puuttuvien riippuvuuksien tapaukset.