Was sind nebenläufige Funktionen wie useTransition und useDeferredValue?

Question

Accepted Answer

Concurrent React kann **Rendering-Arbeit unterbrechen, pausieren und priorisieren**. Sie markieren einige Updates als **nicht-dringende Übergänge**, damit dringende Updates (wie Tippen) reaktionsschnell bleiben, auch wenn ein schweres Re-Rendering ausstehend ist.

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

**Warum das hilft:** Das Filtern einer riesigen Liste ist teuer. Ohne einen Übergang würde React die Eingabe blockieren, während tausende Zeilen erneut gerendert werden, sodass das Tippen langsam wirkt. Indem die teure Aktualisierung in `startTransition` eingebunden wird, behält React die Eingabe-Updates mit hoher Priorität bei und kann ein laufendes Filter-Rendering **verwerfen**, wenn Sie eine weitere Taste drücken — keine veralteten, ruckartigen Frames.

## useDeferredValue

Eine einfachere Alternative, wenn Sie den Setter nicht steuern — sie gibt Ihnen eine "verzögerte" Kopie eines Werts:

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

## Warum es wichtig ist

Verwenden Sie diese für **teure, nicht-dringende UI-Updates**, die durch schnelle Benutzereingaben gesteuert werden: Suche-während-Tippen über große Datensätze, Registerkarten-Wechsel, die umfangreiche Inhalte rendern, große gefilterte/sortierte Tabellen. Für einfache Apps sind sie unnötig — sie glänzen, wenn ein Rendering schwer genug ist, um merkliche Eingabeverzögerungen zu verursachen.