Hva er useEffect og når kjører det?

Question

Accepted Answer

`useEffect` kjører **bivirkninger** — arbeid som når utenfor Reacts rendering, som datahenting, abonnementer, timere eller manuelle DOM-oppdateringer. Det kjører **etter** at komponenten rendres, og holder bivirkninger utenfor render-body (render må holdes ren).

## Avhengighetsmatrisen kontrollerer tidspunktet

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

- **`[count]`** → kjører etter første render og når `count` endres.
- **`[]`** (tom) → kjører **en gang** etter montasje (bra for engangsoppsett).
- **utelatt** → kjører etter **hver** render (sjelden det du ønsker).

## Opprydding: returner en funksjon

Hvis en effekt setter opp noe som trenger rydding, returner en oppryddingsfunksjon. React kaller den før neste effekt kjører og når komponenten demonteres:

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

## Hvorfor opprydding er viktig

Uten det ville hver omkjøring legge til en annen timer/abonnement og aldri fjerne den gamle — en klassisk minnelekkasje. Livssyklusen for en `[dep]` effekt er: *kjør effekt → (dep endres) → kjør opprydding → kjør effekt igjen*.

**Tips:** ikke bruk effekter for ting du kan beregne under rendering (utled verdier i stedet), og inkluder hver verdi effekten leser i avhengighetsmatrisen (`react-hooks/exhaustive-deps` lint-regelen hjelper).