Katere so pogoste pasti z useEffect nizom odvisnosti in čiščenjem?

Question

Accepted Answer

Učinek se ponovno zažene na podlagi svojih **odvisnosti**, in napačen niz je #1 vir React-ovih napak.

## Zakaj je to pomembno

Učinek se zapre nad vrednostmi iz upodobitve, v kateri je bil ustvarjen. Če izpustite odvisnost, bo še naprej uporabljal staro:

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

Rešitev: bodisi dodajte `count` v deps, bodisi uporabite funkcionalni updater, ki ga ne potrebuje (`setCount(c => c + 1)`).

## Past 2: nestabilne odvisnosti → učinek se zažene pri vsaki upodobitvi

Objekti/nizi/funkcije se ponovno ustvarijo pri vsaki upodobitvi, zato so »novi« vsakič in se učinek nikoli ne stabilizira:

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

Rešitev: bodisi je odvisni od primitiva (`[id]`) bodisi memoizira s `useMemo`/`useCallback`.

## Past 3: pozabljeno čiščenje → puščave in race pogoji

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

Brez čiščenja se lahko starejša počasnejša zahteva razreši *po* novejši in prepише sveže podatke (race pogoj), in naročnine/timerji bi se nakopičili. ESLint pravilo `react-hooks/exhaustive-deps` ujame večino primerov manjkajočih odvisnosti.