När bör du använda useMemo och useCallback, och vilket problem löser de?

Question

Accepted Answer

Båda cachar något mellan renderingar så det inte beräknas/skapas på nytt varje gång:
- **`useMemo`** cachar ett **beräknat värde**.
- **`useCallback`** cachar en **funktions identitet** (det är `useMemo(() => fn, deps)`).

De finns till för att undvika (a) att upprepa dyrt arbete och (b) att bryta referenslikhet som memoizerade barn är beroende av.

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

## Varför referensstabilitet är viktigt

Utan `useCallback` är `handleSelect` en helt ny funktion varje rendering. En `React.memo(Grid)` skulle se en "ny" prop och skulle ändå renderas, vilket besegrar memoizeringen. Samma för ett objekt som skickas till ett memoizerat barn eller används i en `useEffect` beroendearry.

## Trade-offs — överanvänd dem inte

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

- Memoization är inte gratis: det kostar minne plus en beroendejämförelse på **varje** rendering.
- En fel/saknad beroendearry ger dig **gamla värden** — det vanligaste bugget.
- Memoiza bara när du har mätt ett verkligt problem (en dyr beräkning, eller ett memoizerat barn som renderas för ofta). Förhastlad `useMemo`/`useCallback` överallt lägger till brus och kan till och med vara långsammare. (React 19:s compiler kan automatiskt memoizera, vilket minskar behovet.)