Wann solltest du useMemo und useCallback verwenden, und welches Problem lösen sie?

Question

Accepted Answer

Beide cachen etwas über Renders hinweg, damit es nicht jedes Mal neu berechnet/neu erstellt wird:
- **`useMemo`** cached einen **berechneten Wert**.
- **`useCallback`** cached die **Identität einer Funktion** (das ist `useMemo(() => fn, deps)`).

Sie existieren, um (a) wiederholte teure Arbeit zu vermeiden und (b) referenzielle Gleichheit nicht zu brechen, auf die memoized Kinder angewiesen sind.

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

## Warum referenzielle Stabilität wichtig ist

Ohne `useCallback` ist `handleSelect` bei jedem Render eine brandneue Funktion. Ein `React.memo(Grid)` würde ein "neues" Prop sehen und sowieso neu rendern, wodurch die Memoization besiegt wird. Dasselbe gilt für ein Objekt, das an ein memoized Kind übergeben oder in einem `useEffect` Dependency Array verwendet wird.

## Warum es wichtig ist — übertreibe es nicht

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

- Memoization ist nicht kostenlos: Es kostet Speicher plus einen Abhängigkeitsvergleich bei **jedem** Render.
- Ein falsches oder fehlendes Dependency Array gibt dir **veraltete Werte** — der häufigste Fehler.
- Memoize nur, wenn du ein echtes Problem gemessen hast (eine teure Berechnung oder ein memoized Kind, das zu oft re-rendered). Zu frühes `useMemo`/`useCallback` überall fügt Rauschen hinzu und kann sogar langsamer sein. (Reacts Compiler in Version 19 kann automatisch memoizen, was den Bedarf verringert.)