Hvornår skal du bruge useMemo og useCallback, og hvilket problem løser de?

Question

Accepted Answer

Begge cacher noget på tværs af renders, så det ikke genberegnes/genoprettes hver gang:
- **`useMemo`** cacher en **beregnet værdi**.
- **`useCallback`** cacher en **funktions identitet** (det er `useMemo(() => fn, deps)`).

De findes for at undgå (a) at gentage dyrt arbejde og (b) at bryde referential equality, som memoized børn er afhængige af.

```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} />;
}
```

## Hvorfor referential stabilitet betyder noget

Uden `useCallback` er `handleSelect` en helt ny funktion ved hver render. En `React.memo(Grid)` ville se et "nyt" prop og alligevel re-rendere, hvilket ville beseire memoization. Det samme for et objekt, der sendes til et memoized barn eller bruges i et `useEffect` dependency array.

## Afvejninger - brug dem ikke for meget

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

- Memoization er ikke gratis: det koster hukommelse plus en afhængighedssammenligning ved **hver** render.
- Et forkert/manglende dependency array giver dig **forældede værdier** - den mest almindelige fejl.
- Memoize kun når du har målt et reelt problem (en dyrt beregning, eller et memoized barn der re-renderer for meget). Prematur `useMemo`/`useCallback` overalt tilføjer støj og kan endda være langsommere. (React 19s compiler kan auto-memoize, hvilket reducerer behovet.)