Cosa sono le funzionalità concorrenti come useTransition e useDeferredValue?

Question

Accepted Answer

Concurrent React può **interrompere, mettere in pausa e prioritizzare** il lavoro di rendering. Contrassegni alcuni aggiornamenti come **transizioni non urgenti** in modo che gli aggiornamenti urgenti (come la digitazione) rimangono reattivi anche mentre un rendering pesante è in sospeso.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**Perché è utile:** filtrare un elenco enorme è costoso. Senza una transizione, React bloccherebbe l'input durante il rendering di migliaia di righe, quindi la digitazione risulterebbe lenta. Avvolgendo l'aggiornamento costoso in `startTransition`, React mantiene gli aggiornamenti di input ad alta priorità e può **scartare** un rendering del filtro in corso se digiti un'altra chiave — nessun frame stantio o traballante.

## useDeferredValue

Un'alternativa più semplice quando non controlli il setter — ti dà una copia "ritardata" di un valore:

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## Perché è importante

Usali per **aggiornamenti dell'interfaccia utente costosi e non urgenti** guidati da input utente veloce: ricerca durante la digitazione su set di dati di grandi dimensioni, cambi di scheda che eseguono il rendering di contenuti pesanti, tabelle filtrate/ordinate di grandi dimensioni. Per app semplici non sono necessarie — brillano quando un rendering è sufficientemente pesante da causare un lag di input visibile.