Hvad er useEffect og hvornår køres det?

Question

IT Interview Practice · Accepted Answer

`useEffect` kører **bivirkninger** — arbejde, der strækker sig ud over Reacts rendering, som datahentning, abonnementer, timere eller manuelle DOM-opdateringer. Det kører **efter** komponenten renders, hvilket holder bivirkninger uden for render-kroppen (render skal forblive ren).

## Afhængighedsarrayet kontrollerer tidspunktet

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → kører efter første rendering og når `count` ændres.
- **`[]`** (tomt) → kører **en gang** efter mount (godt til engangskonfiguration).
- **udeladt** → kører efter **hver** rendering (sjældent det du ønsker).

## Oprydning: returner en funktion

Hvis en effekt opsætter noget, der skal nedmonteres, returneres en oprydningsfunktion. React kalder den før næste effektrun og når komponenten unmountes:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Hvorfor oprydning betyder noget

Uden det ville hver genrun tilføje endnu en timer/abonnement og aldrig fjerne den gamle — en klassisk hukommelseslæk. Livscyklussen for en `[dep]` effekt er: *kør effekt → (dep ændres) → kør oprydning → kør effekt igen*.

**Tip:** Brug ikke effekter til ting, du kan beregne under rendering (udled værdier i stedet), og inkludér hver værdi, som effekten læser, i afhængighedsarrayet (lintreglen `react-hooks/exhaustive-deps` hjælper).

Afhængighedsarrayet kontrollerer tidspunktet

Oprydning: returner en funktion

Hvorfor oprydning betyder noget

Relaterede spørgsmål