Hva er samtidige funksjoner som useTransition og useDeferredValue?

Question

Accepted Answer

Concurrent React kan **avbryte, pause og prioritere** gjengivelsesarbeid. Du merker enkelte oppdateringer som **ikke-hastende overganger** slik at hastende oppdateringer (som skriving) forblir responsiv selv mens en tung ny-gjengivelse 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 hjelper:** å filtrere en enorm liste er dyrt. Uten en overgang ville React blokkere inntastingen mens den gjengiorde tusenvis av rader, så skriving føles treg. Ved å pakke den dyre oppdateringen i `startTransition`, holder React inntastingsoppdateringene høyt prioritert og kan **kaste vekk** en pågående filterrendring hvis du skriver en annen tast — ingen foreldet, hakking av bilder.

## useDeferredValue

Et enklere alternativ når du ikke kontrollerer settingen — det gir deg en "etterslepende" kopi av en verdi:

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

## Når du skal bruke disse

Bruk disse for **dyre, ikke-hastende brukergrensesnittoppdateringer** drevet av rask brukerinput: søk-mens-du-skriver over store datasett, fanebytter som gjengiør tungt innhold, store filtrerte/sorterte tabeller. For enkle apper er de unødvendige — de skinner når en gjengivelse er tung nok til å forårsake synlig inntastingsforsinkelse.