Vad är concurrent-funktioner som useTransition och useDeferredValue?

Question

Accepted Answer

Concurrent React kan **avbryta, pausa och prioritera** renderingsarbete. Du markerar vissa uppdateringar som **icke-brådskande transitions** så att brådskande uppdateringar (som skrivning) förblir responsiva även när en tung omrendering väntar.

## 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
```

**Varför detta hjälper:** att filtrera en stor lista är dyrt. Utan en transition skulle React blockera inmatningen medan den renderar om tusentals rader, så skrivningen känns seg. Genom att slå in den dyra uppdateringen i `startTransition` behåller React inmatningsuppdateringar i högt prioritet och kan **kasta bort** en pågående filterrendering om du skriver en annan tangent — inga föråldrade, stuttiga bildrutor.

## useDeferredValue

Ett enklare alternativ när du inte kontrollerar setter-funktionen — det ger dig en "eftersläpande" kopia av ett värde:

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

## När du ska använda detta

Använd dessa för **dyra, icke-brådskande gränssnittsuppdateringar** driven av snabb användarinmatning: sök-medan-du-skriver över stora dataset, flikbyten som renderar tungt innehål, stora filtrerade/sorterade tabeller. För enkla appar är de onödiga — de lyser när en rendering är tung nog för att orsaka synlig inmatningsfördröjning.