Care sunt capcanele comune cu array-ul de dependență useEffect și curățare?

Question

Accepted Answer

Un efect se reexecută pe baza **dependențelor** sale, iar obținerea greșit a acelui array este sursa #1 a bug-urilor React.

## De ce conteaza

Un efect se închide peste valorile din randarea în care a fost creat. Dacă omiteți o dependență, va continua să utilizeze una veche:

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

Fix: fie adăugați `count` la deps, fie utilizați un updater funcțional care nu are nevoie de acesta (`setCount(c => c + 1)`).

## Capcană 2: dependențe instabile → efectul se execută la fiecare randare

Obiectele/array-urile/funcțiile sunt recreate la fiecare randare, deci sunt "noi" de fiecare dată și efectul nu se stabilizează niciodată:

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

Fix: depinde de primitiv (`[id]`), sau memoizați cu `useMemo`/`useCallback`.

## Capcană 3: curățare uitată → scurgeri și condiții de curse

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

Fără curățare, o cerere mai lentă anterioare ar putea să se rezolve *după* una mai nouă și să suprascrie datele proaspete (o condiție de cursă), iar abonările/cronometrul s-ar acumula. Regula ESLint `react-hooks/exhaustive-deps` prinde majoritatea cazurilor de dependență lipsă.