Wat is useEffect en wanneer wordt het uitgevoerd?

Question

IT Interview Practice · Accepted Answer

`useEffect` voert **bijwerkingen** uit — werk dat buiten React's rendering reikt, zoals het ophalen van gegevens, abonnementen, timers of handmatige DOM-updates. Het wordt **na** het renderen van de component uitgevoerd, waardoor bijwerkingen buiten de render-body blijven (render moet zuiver blijven).

## De dependency array bepaalt het moment

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

- **`[count]`** → wordt uitgevoerd na de eerste render en wanneer `count` verandert.
- **`[]`** (leeg) → wordt **eenmaal** na mount uitgevoerd (goed voor eenmalige setup).
- **weggelaten** → wordt na **elke** render uitgevoerd (zelden wat je wilt).

## Cleanup: return een functie

Als een effect iets opzet dat moet worden afgebroken, return je een cleanup-functie. React roept deze aan vóór de volgende effect-run en wanneer de component wordt verwijderd:

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

## Waarom cleanup belangrijk is

Zonder cleanup zou elke heruitvoering nog een timer/abonnement toevoegen en de oude nooit verwijderen — een klassiek geheugenlek. De lifecycle voor een `[dep]` effect is: *run effect → (dep verandert) → run cleanup → run effect opnieuw*.

**Tip:** gebruik effects niet voor dingen die je tijdens render kunt berekenen (ontleed waarden in plaats daarvan), en neem elke waarde die het effect leest op in de dependency array (de `react-hooks/exhaustive-deps` lint-regel helpt hierbij).

De dependency array bepaalt het moment

Cleanup: return een functie

Waarom cleanup belangrijk is

Gerelateerde vragen