Transitions mark updates as nonurgent so React can prioritize urgent interaction. They do not make CPU-heavy JavaScript run on another thread.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: Keep a controlled input update urgent while transitioning the expensive results view. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Separate urgent feedback
Typing must update the controlled input immediately. The larger results view can follow with lower priority.
Step 2: Mark the secondary update
Keep the text setter outside startTransition. Wrap the update driving expensive results in the transition.
Step 3: Address computation separately
A long synchronous calculation still blocks JavaScript. Optimize, chunk or move it to a worker when scheduling rendering is insufficient.
Worked scenario
Keep a controlled input update urgent while transitioning the expensive results view.
function onChange(event) {
const next = event.target.value;
setInput(next);
startTransition(() => setResultsQuery(next));
}Input controls the field, while resultsQuery drives the results component. This separates urgency; it does not run the results algorithm on another thread or guarantee that a large calculation is cheap.
Common mistake
Putting the input’s own controlled value update in a transition can produce an unresponsive editing experience.
Verify the behavior
Type quickly with a large dataset. Check input responsiveness, pending feedback and eventual results accuracy, including a query changed before earlier work completes.
Interview exercise
Handle genuinely heavy computation.
Answer and reasoning
Reduce the algorithmic cost, chunk work or use a worker; transitions prioritize rendering work rather than moving arbitrary computation.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.