Vilka är vanliga fallgropar med useEffect dependency array och cleanup?

Question

Accepted Answer

En effekt körs igen baserat på dess **beroenden**, och att få den arrayen fel är källan till #1 React-buggar.

## Varför det är viktigt

En effekt stänger sig över värdena från den rendering den skapades i. Om du utelämnar ett beroende använder den fortsatt ett gammalt:

```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: lägg antingen till `count` i deps, eller använd en functional updater som inte behöver det (`setCount(c => c + 1)`).

## Pitfall 2: instabila beroenden → effekten körs varje rendering

Objekt/arrayer/funktioner återskapas på varje rendering, så de är "nya" varje gång och effekten lugnar sig aldrig:

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

Fix: förlita dig på primitiven (`[id]`), eller memoize med `useMemo`/`useCallback`.

## Pitfall 3: glömd cleanup → läckor & races

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

Utan cleanup kunde en långsam tidigare request resolve *efter* en nyare och skriva över färska data (en race condition), och subscriptions/timers skulle staplas. ESLint-regeln `react-hooks/exhaustive-deps` fångar de flesta saknade beroendenas fall.