Koja su česta nedostaća s useEffect nizu ovisnosti i čišćenju?

Question

IT Interview Practice · Accepted Answer

Efekt se ponovno pokreće na temelju svojih **ovisnosti**, a pogrešan niz je izvor #1 React grešaka.

## Nedostatak 1: nedostaje ovisnosti → zastarjele vrijednosti

Efekt se zatvara oko vrijednosti iz rendera u kojem je kreiran. Ako izostaviš ovisnost, nastavlja koristiti staru:

```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
```

Ispravka: ili dodaj `count` u deps, ili koristi funkcijski updater koji ga ne treba (`setCount(c => c + 1)`).

## Nedostatak 2: nestabilne ovisnosti → efekt se pokreće svakim rendera

Objekti/nizovi/funkcije se ponovno kreiraju na svakom rendera, tako da su "novi" svaki put i efekt se nikad ne ustali:

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

Ispravka: ovisi o primitivi (`[id]`), ili memoiziraj s `useMemo`/`useCallback`.

## Nedostatak 3: zaboravljeno čišćenje → curenja i utrke

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

Bez čišćenja, sporiji zahtjev prije može se razriješiti *nakon* novijeg i prepisati svježe podatke (stanje utrke), te će se pretplate/tajmeri nakupljati. ESLint pravilo `react-hooks/exhaustive-deps` hvata većinu slučajeva nedostajućih ovisnosti.

Nedostatak 1: nedostaje ovisnosti → zastarjele vrijednosti

Nedostatak 2: nestabilne ovisnosti → efekt se pokreće svakim rendera

Nedostatak 3: zaboravljeno čišćenje → curenja i utrke

Povezana pitanja