Was bringt dir useTransition, und wann hast du es eingesetzt?

useTransition markiert ein State-Update als nicht dringend. React hält den aktuellen Screen bedienbar, rendert das neue Ergebnis im Hintergrund und kann diese Arbeit wegwerfen, wenn etwas Dringenderes wie Tippen dazwischenkommt. Dazu bekommst du ein isPending-Flag für einen dezenten Ladezustand. Nimm es für teure Ansichtswechsel wie das Filtern einer großen Liste oder einen Tab-Wechsel, nie für den Tastendruck selbst.

Die Idee ist, dass nicht jedes Update dieselbe Priorität verdient. Tippen in einem Suchfeld muss sofort ankommen, sonst fühlt sich das Input kaputt an. Dreitausend gefilterte Ergebnisse neu zu rendern muss das nicht. Ich halte den Input-Wert also als normales State-Update und packe das teure in startTransition. React rendert den schweren Baum dann im Hintergrund, lässt die alten Ergebnisse währenddessen stehen, und wenn der User weitertippt, wirft es diesen Render weg und fängt neu an. Ich habe das auf einer Suchseite gemacht, bei der jeder Tastendruck ein großes Ergebnisraster neu gebaut hat und das Input diese schreckliche halbe Sekunde Verzögerung hatte. Das Ergebnis-Update in eine Transition zu packen hat das Tippgefühl repariert, ganz ohne Debouncing, und mit isPending habe ich die veralteten Ergebnisse leicht abgeblendet, damit es nicht eingefroren wirkt. useDeferredValue macht etwas Ähnliches, dazu greife ich, wenn ich nur den Wert habe und nicht den Setter, etwa wenn der Wert als Prop reinkommt.