Wanneer moet je useMemo en useCallback gebruiken, en welk probleem lossen ze op?

Question

Accepted Answer

Beide cachen iets over renders heen zodat het niet elke keer opnieuw wordt berekend/aangemaakt:
- **`useMemo`** cacht een **berekende waarde**.
- **`useCallback`** cacht een **functie's identiteit** (het is `useMemo(() => fn, deps)`).

Ze bestaan om (a) herhaalwerk van dure berekeningen te voorkomen en (b) referentiële gelijkheid niet te breken waar gememoizeerde children op vertrouwen.

```jsx
function Table({ rows, onSelect }) {
  // (a) expensive computation — recompute only when `rows` changes
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) stable function identity — so a React.memo child doesn't re-render,
  //     and effects depending on it don't re-fire
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## Waarom het belangrijk is

Zonder `useCallback` is `handleSelect` een gloednieuwe functie bij elke render. Een `React.memo(Grid)` zou een "nieuwe" prop zien en toch opnieuw renderen, waardoor de memoization voorbijgestreefd wordt. Hetzelfde geldt voor een object dat aan een gememoizeerd child wordt doorgegeven of in een `useEffect` dependency array wordt gebruikt.

## Trade-offs — gebruik ze niet te veel

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- Memoization is niet gratis: het kost geheugen plus een dependency vergelijking bij **elke** render.
- Een verkeerde/ontbrekende dependency array geeft je **stale values** — de meest voorkomende bug.
- Memoizeer alleen wanneer je een echt probleem hebt gemeten (een dure berekening, of een gememoizeerd child dat te veel opnieuw rendert). Voortijdig `useMemo`/`useCallback` overal toepassen voegt ruis toe en kan zelfs langzamer zijn. (React 19's compiler kan automatisch memoizeren, wat de noodzaak vermindert.)