Quando dovresti usare useMemo e useCallback, e quale problema risolvono?

Question

Accepted Answer

Entrambi memorizzano qualcosa attraverso i render, quindi non viene ricalcolato/ricreato ogni volta:
- **`useMemo`** memorizza un **valore calcolato**.
- **`useCallback`** memorizza l'**identità della funzione** (è `useMemo(() => fn, deps)`).

Esistono per evitare (a) di ripetere lavoro costoso e (b) di infrangere l'uguaglianza referenziale su cui i figli memoizzati si affidano.

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

## Perché è importante

Senza `useCallback`, `handleSelect` è una funzione completamente nuova ad ogni render. Un `React.memo(Grid)` vedrebbe una prop "nuova" e si rirenderizzerebbe comunque, vanificando la memoizzazione. Lo stesso vale per un oggetto passato a un figlio memoizzato o usato in un array di dipendenze di `useEffect`.

## Trade-off — non abusarne

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

- La memoizzazione non è gratis: costa memoria più un confronto di dipendenze ad **ogni** render.
- Un array di dipendenze sbagliato/mancante ti dà **valori obsoleti** — il bug più comune.
- Memoizza solo quando hai misurato un problema reale (un calcolo costoso, o un figlio memoizzato che si rirenderizza troppo). Usare prematuramente `useMemo`/`useCallback` ovunque aggiunge rumore e può persino essere più lento. (Il compiler di React 19 può auto-memoizzare, riducendo la necessità.)