What is the useTransition Hook in React?
Learn how React's useTransition Hook marks updates as non-urgent transitions, keeping input responsive during heavy re-renders with isPending feedback.
Expected Interview Answer
useTransition is a React Hook that lets you mark certain state updates as non-urgent transitions, so React can keep the interface responsive to urgent input while the slower update renders in the background.
It returns a pair: an isPending boolean and a startTransition function. Updates wrapped in startTransition are treated as low priority and become interruptible, so typing or clicking stays smooth even while an expensive re-render (like filtering a large list) is in progress. React can pause, interrupt, or discard a transition if a newer urgent update arrives, and isPending lets you show a subtle loading indicator. It does not debounce or make work faster — it reprioritizes rendering.
- Keeps urgent input responsive during heavy updates
- Marks expensive re-renders as interruptible and low priority
- Provides isPending to show pending UI
- Avoids blocking the main thread on large updates
- Improves perceived performance without manual debouncing
AI Mentor Explanation
A captain answers the umpire's urgent call instantly but defers rearranging the field until there is a gap between balls. useTransition is that instinct: urgent updates like typing happen at once, while heavier reshuffles are marked low priority and slotted in when the interface has room.
Step-by-Step Explanation
Step 1
Call the hook
Destructure const [isPending, startTransition] = useTransition() inside your component.
Step 2
Identify the heavy update
Find the state update that triggers an expensive re-render, such as filtering a large list.
Step 3
Wrap it in startTransition
Call startTransition(() => setResults(filtered)) so React treats that update as non-urgent.
Step 4
Keep urgent updates outside
Update the input value directly and immediately so typing stays responsive.
Step 5
Show pending UI
Use isPending to render a subtle spinner or dimmed state while the transition renders.
What Interviewer Expects
- Knowing it returns isPending and startTransition
- Understanding urgent versus non-urgent updates
- That transitions are interruptible and low priority
- That it reprioritizes rather than debounces or speeds up work
- Using isPending to show pending feedback
Common Mistakes
- Thinking useTransition debounces or makes rendering faster
- Wrapping urgent updates like the controlled input value in startTransition
- Ignoring isPending and giving users no feedback
- Using it for data fetching side effects instead of rendering priority
- Expecting state inside startTransition to update synchronously
Best Answer (HR Friendly)
“useTransition lets React tell the difference between urgent updates, like the letters you type, and heavier updates that can wait, like filtering a huge list. It keeps the app feeling responsive by handling the urgent part first and doing the slow part in the background.”
Code Example
import { useState, useTransition } from 'react'
function SearchList({ items }) {
const [query, setQuery] = useState('')
const [results, setResults] = useState(items)
const [isPending, startTransition] = useTransition()
function handleChange(e) {
const value = e.target.value
setQuery(value) // urgent: keep input responsive
startTransition(() => {
// non-urgent: expensive filtering
setResults(items.filter((i) => i.includes(value)))
})
}
return (
<>
<input value={query} onChange={handleChange} />
{isPending && <span>Updating…</span>}
<ul>{results.map((r) => <li key={r}>{r}</li>)}</ul>
</>
)
}Follow-up Questions
- What is the difference between useTransition and useDeferredValue?
- Does useTransition debounce updates?
- Why should the controlled input value stay outside startTransition?
- How does React interrupt a transition?
- When would you show the isPending indicator?
MCQ Practice
1. What does useTransition return?
useTransition returns an isPending boolean and a startTransition function used to mark non-urgent updates.
2. Updates wrapped in startTransition are treated as?
They are low priority, so React can interrupt or discard them when a more urgent update arrives.
3. What does useTransition NOT do?
It only changes the priority of updates; it does not speed up or debounce the underlying work.
Flash Cards
What does useTransition return? — An isPending boolean and a startTransition function.
What are transitions? — Non-urgent, interruptible state updates React can pause for urgent input.
Does it debounce? — No — it reprioritizes rendering; it does not delay or speed up the work.
What is isPending for? — Showing a loading or dimmed state while the transition renders.