Melyek a useEffect függőségi tömb és a tisztítás során gyakori buktatók?

Question

Accepted Answer

A hatás a **függőségei** alapján fut újra, és a tömb helytelen kezelése a React hibák #1 forrása.

## Bukta 1: hiányzó függőségek → elavult értékek

A hatás az azt létrehozó render értékeihez kötődik. Ha elhagyod a függőséget, továbbra is a régit használja:

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

Megoldás: vagy add hozzá a `count` értéket a deps-hez, vagy használj egy funkcionális frissítőt, amelyre nincs szükség (`setCount(c => c + 1)`).

## Bukta 2: instabil függőségek → hatás minden renderben lefut

Az objektumok/tömbök/funkciók minden renderben újra létrejönnek, így minden alkalommal "új" és a hatás soha nem rendeződik:

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

Megoldás: a primitívtől függ (`[id]`), vagy memoizálj a `useMemo`/`useCallback` használatával.

## Bukta 3: elfelejtett tisztítás → szivárgások és versengés

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

A tisztítás nélkül egy korábbi lassabb kérés *után* oldódhat fel egy újabbat és felülírhatja az új adatokat (versengési feltétel), és az előfizetések/időzítők felhalmozódnak. A `react-hooks/exhaustive-deps` ESLint szabály a legtöbb hiányzó függőség esetet elkapja.