Wat zijn gelijktijdige functies zoals useTransition en useDeferredValue?

Question

Accepted Answer

Concurrent React kan **rendering-werk onderbreken, pauzeren en prioriteren**. Je markeert bepaalde updates als **niet-urgente transitions** zodat urgente updates (zoals typen) responsief blijven, zelfs terwijl een zware re-render in behandeling is.

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

**Waarom dit helpt:** het filteren van een grote lijst is duur. Zonder een transition zou React de invoer blokkeren terwijl duizenden rijen opnieuw worden weergegeven, dus typen voelt traag. Door de dure update in `startTransition` in te pakken, houdt React de invoer-updates met hoge prioriteit en kan het een lopende filter-render **weggooien** als je een ander toets inslaat — geen verouderde, hobbelige frames.

## useDeferredValue

Een eenvoudiger alternatief als je de setter niet controleert — het geeft je een "achterblijvende" kopie van een waarde:

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

## Waarom het belangrijk is

Gebruik dit voor **dure, niet-urgente UI-updates** aangestuurd door snelle gebruikersinvoer: zoeken-terwijl-u-typt over grote datasets, tabbladen wisselen die zware inhoud weergeven, grote gefilterde/gesorteerde tabellen. Voor eenvoudige apps zijn ze onnodig — ze glimmen als een render zwaar genoeg is om merkbaar invoervertraging te veroorzaken.