Hva er vanlige fallgruver med useEffect avhengighetsarray og opprydding?

Question

Accepted Answer

En effekt kjører på nytt basert på sine **avhengigheter**, og å få den arrayen feil er #1-kilden til React-bugs.

## Hvorfor det er viktig

En effekt stengs over verdiene fra renderet den ble opprettet i. Hvis du utelater en avhengighet, fortsetter den å bruke en gammel:

```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: enten legg til `count` i deps, eller bruk en funksjonell updater som ikke trenger det (`setCount(c => c + 1)`).

## Pitfall 2: ustabile avhengigheter → effekt kjører på hver render

Objekter/arrays/funksjoner gjenopprettes på hver render, så de er "nye" hver gang og effekten blir aldri stabil:

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

Fix: avheng av primitiven (`[id]`), eller memoize med `useMemo`/`useCallback`.

## Pitfall 3: glemt opprydding → lekkasjer & race conditions

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

Uten opprydding kunne en treg tidligere forespørsel løses *etter* en nyere og overskrive ferske data (en race condition), og abonnementer/timere ville hoper seg opp. `react-hooks/exhaustive-deps` ESLint-regelen fanger de fleste tilfeller av manglende avhengigheter.