What does useTransition give you, and when have you used it?

useTransition marks a state update as non urgent. React keeps the current screen interactive, renders the new result in the background, and can throw that work away if something more urgent, such as typing, arrives. You also get an isPending flag for a subtle loading state. Use it for expensive view changes like filtering a large list or switching tabs, never for the keystroke itself.

The idea is that not every update deserves the same priority. Typing into a search box has to land immediately or the input feels broken. Re-rendering three thousand filtered results does not. So I keep the input value as a normal state update and wrap the expensive one in startTransition. React then renders the heavy tree in the background, keeps the old results on screen while it works, and if the user types again it abandons that render and starts over. I used this on a search page where every keystroke rebuilt a big result grid, and the input had that horrible half second lag. Wrapping the results update in a transition fixed the typing feel without any debouncing, and I used isPending to fade the stale results slightly so it did not look frozen. useDeferredValue does something similar, and I reach for that when I only have the value and not the setter, for example when the value arrives as a prop.