What Is React Concurrent Rendering?
Learn how React concurrent rendering works, why it enables useTransition, and how it keeps UIs responsive under load.
Expected Interview Answer
Concurrent rendering is a React capability, enabled by createRoot, that lets React prepare multiple versions of the UI at once, interrupt a low-priority render midway to handle a more urgent update, and discard or resume work without blocking the main thread or leaving the UI in an inconsistent state.
Before concurrent rendering, React rendering was synchronous and blocking: once React started rendering an update, it couldn’t be interrupted, so a large re-render could freeze the browser and delay urgent input like typing or clicks. Concurrent rendering makes rendering interruptible by splitting work into small units and yielding back to the browser between them, so React can pause a render, let the browser handle a more urgent task, and either resume or restart the render with fresher data. This is what powers features like useTransition, which marks an update as non-urgent so React can keep the UI responsive to urgent updates while the transition renders in the background, and useDeferredValue, which lets a slow-to-render value lag behind an urgent one. Concurrent rendering doesn’t make any single render faster; it changes the scheduling so the browser stays responsive and higher-priority updates are never starved by lower-priority ones.
- Keeps the UI responsive to urgent input like typing while large renders happen in the background
- Enables useTransition to mark updates as interruptible, non-blocking work
- Allows React to discard stale in-progress renders when newer data arrives
- Foundation for streaming SSR and Suspense-based data fetching
AI Mentor Explanation
Concurrent rendering is like a groundskeeper mid-way through repainting the boundary rope markings when an urgent rain-cover call comes in — instead of finishing the paint job first and delaying the covers, the crew pauses the paint work, handles the urgent cover deployment immediately, then resumes or restarts the paint job afterward. The paint job was interruptible work; the rain cover was urgent work that could not wait. That ability to pause low-priority work for something urgent, without losing track of where you were, is exactly what concurrent rendering gives React.
Step-by-Step Explanation
Step 1
Enable concurrent features via createRoot
Rendering with createRoot (instead of the legacy ReactDOM.render) opts the app into concurrent capabilities.
Step 2
React splits work into units
Rendering is broken into small chunks so React can pause between them and check for higher-priority work.
Step 3
Mark non-urgent updates with useTransition
Updates wrapped in startTransition are treated as interruptible and lower priority than urgent input.
Step 4
React yields, discards, or resumes
If an urgent update arrives mid-render, React yields to it, and may discard or restart the stale in-progress render.
What Interviewer Expects
- Understanding that concurrent rendering is about interruptibility and scheduling, not raw speed
- Ability to explain useTransition and useDeferredValue use cases
- Awareness that createRoot is required to opt in to concurrent features
- Distinguishing urgent updates (typing, clicks) from non-urgent transitions
Common Mistakes
- Claiming concurrent rendering makes every render faster in isolation
- Confusing it with multi-threading — React still runs on a single JS thread
- Forgetting createRoot is required; ReactDOM.render does not get concurrent behavior
- Not knowing the difference between useTransition and useDeferredValue
Best Answer (HR Friendly)
“Concurrent rendering lets React pause a big update partway through if something more urgent happens, like the user typing, so the interface never freezes. It doesn’t make React faster at any one task, it just makes sure important things like typing responsiveness always jump the queue ahead of less urgent background work.”
Code Example
import { useState, useTransition } from 'react'
function SearchResults() {
const [query, setQuery] = useState('')
const [results, setResults] = useState([])
const [isPending, startTransition] = useTransition()
function handleChange(e) {
const value = e.target.value
setQuery(value) // urgent: keep the input responsive
startTransition(() => {
// non-urgent: large list re-render can be interrupted
setResults(filterLargeDataset(value))
})
}
return (
<div>
<input value={query} onChange={handleChange} />
{isPending ? <span>Updating...</span> : <ResultsList items={results} />}
</div>
)
}Follow-up Questions
- What is the difference between useTransition and useDeferredValue?
- How does concurrent rendering relate to Suspense and streaming SSR?
- Why does createRoot matter for enabling concurrent features?
- Can a concurrent render be interrupted and discarded — what happens to side effects if so?
MCQ Practice
1. What does concurrent rendering fundamentally enable in React?
Concurrent rendering makes rendering interruptible and priority-aware, not multi-threaded or diff-free.
2. What hook marks an update as non-urgent, interruptible work?
useTransition wraps state updates so React treats them as lower-priority, interruptible transitions.
3. What API is required to opt into concurrent rendering features?
createRoot enables the concurrent renderer; the legacy ReactDOM.render does not.
Flash Cards
What does concurrent rendering enable? — Interruptible rendering so urgent updates can preempt lower-priority ones.
What API enables concurrent features? — ReactDOM.createRoot (not the legacy ReactDOM.render).
What does useTransition do? — Marks a state update as non-urgent, interruptible background work.
Does concurrent rendering use multiple threads? — No — React still runs on a single JS thread; it changes scheduling, not parallelism.