useTransition: Keep Your UI Responsive During State Changes
useTransition lets you update state without blocking the UI, keeping your app responsive. Use it for slow renders like filtering large lists, while the isPending flag shows a loading state.
Why it exists
By default, React state updates are urgent and can block the main thread, causing the UI to freeze during expensive re-renders. This creates a janky user experience. useTransition was created to allow these slow updates to happen in the background, keeping the application responsive to user input.
The mental model
Think of useTransition as creating two rendering lanes: an urgent lane for immediate feedback (like typing in an input) and a non-urgent "transition" lane for slower updates (like displaying the search results for that typing). Updates in the transition lane don't block the user from continuing to interact with the page.
How it works
Call useTransition() at the top level of your component. It returns an array with two values: isPending, a boolean flag, and startTransition, a function. You wrap your slow state update inside a call to startTransition. For example: startTransition(() => { setFilteredList(newList); });. While React processes this non-blocking update, the isPending flag becomes true, allowing you to show a loading spinner or disable a button.
When to use it
Use useTransition for state updates that trigger computationally expensive re-renders. This is common when filtering a large list, switching between complex tabs, or performing any action where UI responsiveness is more critical than the immediate display of the new state. It allows you to provide immediate feedback on one part of the UI while a heavier update prepares in the background.
When not to use it
Avoid wrapping every state update. For fast, simple updates like managing a controlled input's value, a transition is unnecessary overhead. The purpose is to manage slowness; if there's no perceptible lag, there's no problem to solve. Overusing it can make code harder to reason about.
One canonical example
Consider a search bar that filters a long list of products. Without useTransition, each keystroke could cause the app to stutter as it re-filters and re-renders the entire list. By wrapping the state update for the filtered list in startTransition, the input field remains perfectly responsive. The user can type without lag, and the list updates smoothly in the background a moment later. The isPending flag can show a subtle "Updating..." message next to the list.
Interview question
How does useTransition primarily ensure a responsive UI when handling a slow state update?
- a.By executing the expensive update in a background thread, separate from the main UI thread.
- b.By automatically memoizing all components affected by the state change to prevent unnecessary re-renders.
- c.By pausing all other state updates until the slow transition has fully completed its rendering.
- d.By allowing urgent user interactions to render immediately while the slow update proceeds in a lower-priority lane.Correct
Why? this is the answer
useTransition creates two rendering lanes: an urgent lane for immediate feedback and a non-urgent 'transition' lane for slower updates, allowing the UI to remain interactive. Option A is incorrect because useTransition manages priority on the main thread, it does not move work to a separate background thread.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles