Hvad er samtidige funktioner som useTransition og useDeferredValue?

Question

Accepted Answer

Concurrent React kan **afbryde, pause og prioritere** renderingsarbejde. Du markerer nogle opdateringer som **ikke-hastende transititioner**, så hastende opdateringer (som at skrive) forbliver responsiv selv mens en tung re-render venter.

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

**Hvorfor dette hjælper:** filtrering af en enorm liste er dyrt. Uden en transition ville React blokere inputtet under genudgøring af tusinder af rækker, så skrivning føles doven. Ved at pakke den dyre opdatering ind i `startTransition` holder React inputopdateringer høj-prioriteret og kan **kaste væk** en igangværende filterudgøring, hvis du skriver en anden nøgle — ingen forældet, hakket rammer.

## useDeferredValue

Et simplere alternativ når du ikke kontrollerer setteren — det giver dig en "haltende" kopi af en værdi:

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

## Hvornår du skal bruge det

Brug disse til **dyre, ikke-hastende UI-opdateringer** drevet af hurtige brugerinput: søg-mens-du-skriver over store datasæt, fanebladsskift der rendere tungt indhold, store filtrerede/sorterede tabeller. For simple apps er de unødvendige — de glimrer når en render er tung nok til at forårsage synligt inputforsinkelse.