Vad är useEffect och när körs det?

Question

IT Interview Practice · Accepted Answer

`useEffect` kör **biverkningar** — arbete som når utanför Reacts rendering, som datahämtning, prenumerationer, timers eller manuella DOM-uppdateringar. Det körs **efter** att komponenten renderas, vilket håller biverkningar utanför render-kroppen (render måste förbli ren).

## Dependency array styr tidpunkten

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

- **`[count]`** → körs efter första rendring och när `count` ändras.
- **`[]`** (tom) → körs **en gång** efter mount (bra för engångsinstallation).
- **utelämnad** → körs efter **varje** rendring (sällan vad du vill).

## Rengöring: returnera en funktion

Om en effekt ställer in något som behöver rensas, returnera en rengöringsfunktion. React anropar den före nästa effektkörning och när komponenten unmountas:

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

## Varför rengöring är viktigt

Utan det skulle varje omkörning lägga till en annan timer/prenumeration och aldrig ta bort den gamla — en klassisk minneslecka. Livscykeln för en `[dep]` effekt är: *kör effekt → (dep ändras) → kör rengöring → kör effekt igen*.

**Tips:** använd inte effekter för saker du kan beräkna under rendering (härleda värden istället) och inkludera varje värde som effekten läser i dependency array (lint-regeln `react-hooks/exhaustive-deps` hjälper).

Dependency array styr tidpunkten

Rengöring: returnera en funktion

Varför rengöring är viktigt

Relaterade frågor