Når bør du bruke useMemo og useCallback, og hvilket problem løser de?

Question

Accepted Answer

Begge cacher noe på tvers av renderings slik at det ikke blir reberegnet/gjenopprettet hver gang:
- **`useMemo`** cacher en **beregnet verdi**.
- **`useCallback`** cacher en **funksjons identitet** (det er `useMemo(() => fn, deps)`).

De eksisterer for å unngå (a) å gjenta kostbar arbeid og (b) å bryte referensiell likhet som memoiserte barn er avhengige 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} />;
}
```

## Hvorfor referensiell stabilitet betyr noe

Uten `useCallback`, er `handleSelect` en helt ny funksjon hver rendering. En `React.memo(Grid)` ville sett en "ny" prop og rendret likevel, noe som ville slå ut memoiseringen. Det samme gjelder for et objekt som sendes til et memoisert barn eller brukes i en `useEffect` avhengighetsliste.

## Avveiinger — bruk dem ikke for mye

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

- Memodering er ikke gratis: det koster minne pluss en avhengighetssammenligning på **hver** rendering.
- En feil/manglende avhengighetsliste gir deg **foreldede verdier** — den vanligste buggen.
- Memoiser bare når du har målt et ekte problem (en kostbar beregning, eller et memoisert barn som rendrer for mye). Forhåndsbestemt `useMemo`/`useCallback` overalt legger til støy og kan til og med være tregere. (React 19s kompilator kan auto-memoizere, noe som reduserer behovet.)