Hvad er almindelige faldgruber med useEffect-afhængighedsarray og oprydning?

Question

Accepted Answer

En effect kører igen baseret på dets **afhængigheder**, og at få det array forkert er #1-kilden til React-fejl.

## Faldgrube 1: manglende afhængigheder → forældede værdier

En effect lukker over værdierne fra det render, det blev skabt i. Hvis du udelader en afhængighed, forbliver den ved at bruge en gammel værdi:

```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 tilføj `count` til deps, eller brug en funktionel opdaterer, der ikke behøver det (`setCount(c => c + 1)`).

## Faldgrube 2: ustabile afhængigheder → effect kører ved hvert render

Objekter/arrays/funktioner genoprettes ved hvert render, så de er "nye" hver gang og effekten stabiliseres aldrig:

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

Fix: afhængigt af primitiven (`[id]`), eller memoiser med `useMemo`/`useCallback`.

## Faldgrube 3: glemt oprydning → lækager og 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]);
```

Uden oprydning kunne en langsommere tidligere anmodning løses *efter* en nyere og overskrive friske data (en race condition), og abonnementer/timere ville ophobe sig. ESLint-reglen `react-hooks/exhaustive-deps` fanger de fleste manglende-afhængighed-tilfælde.