Concurrent rendering is a feature introduced in React 18 that allows React to prepare multiple versions of the UI simultaneously, improving responsiveness and user experience. It makes rendering interruptible, enabling React to prioritize urgent updates and avoid UI blocking during heavy computations.
How does React’s concurrent rendering improve performance?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Traditional rendering in React was synchronous — once React started rendering a component tree, it had to finish before handling new updates. Concurrent rendering changes that behavior. It allows React to work on multiple UI updates at the same time, pause work when necessary, and prioritize more important updates (like user interactions) over less critical ones.
Key Concept
Concurrent rendering doesn’t mean React renders components in parallel; rather, it can interrupt and resume work intelligently. This leads to smoother UIs, especially in complex applications where large updates could otherwise block input or animations.
Feature | Explanation |
|---|---|
Interruptible Rendering | React can pause an ongoing render to handle higher-priority tasks, like responding to a user click. |
Prioritized Updates | Updates are assigned priorities — urgent ones (like typing) are handled first, while non-urgent ones (like data loading) can be delayed. |
Concurrent Preparation | React can prepare multiple versions of the UI in memory and commit the best one when ready. |
Non-blocking Rendering | Rendering no longer freezes the main thread, keeping the app responsive even under heavy load. |
JSX
// Example using useTransition
import { useState, useTransition } from 'react';
function SearchList({ items }) {
const [query, setQuery] = useState('');
const [filtered, setFiltered] = useState(items);
const [isPending, startTransition] = useTransition();
const handleChange = (e) => {
const value = e.target.value;
setQuery(value);
startTransition(() => {
const results = items.filter(item => item.includes(value));
setFiltered(results);
});
};
return (
<div>
<input value={query} onChange={handleChange} placeholder='Search...' />
{isPending && <p>Loading...</p>}
<ul>{filtered.map((item, i) => <li key={i}>{item}</li>)}</ul>
</div>
);
}
How This Improves Performance
- By marking some updates as ‘transitions’, React knows they are not urgent and can delay them to keep the UI responsive.
- React can interrupt rendering mid-way to handle urgent updates first, then continue rendering where it left off.
- This prevents input lag and stuttering during large data updates or re-renders.
Key APIs Enabling Concurrent Rendering
useTransition(): Defers expensive updates to improve responsiveness.useDeferredValue(): Allows a value to ‘lag behind’ to avoid blocking fast updates.startTransition(): Marks non-urgent updates to be scheduled with lower priority.Suspense: Works with concurrent rendering to pause UI updates until asynchronous data is ready.
Under the Hood
React’s concurrent renderer is built on a new architecture called the Fiber Reconciler. Each component update is split into small units of work (called fibers). This lets React work on these pieces incrementally and yield control back to the browser between frames, ensuring smooth rendering without blocking the main thread.
Example of Prioritization
Imagine typing into a search box that filters a large list. With concurrent rendering:
- Your keystrokes (high priority) update the input immediately.
- The filtering logic (low priority) runs in the background without freezing the input field.
Concurrent rendering isn’t about parallelism — it’s about cooperative scheduling. React breaks large tasks into smaller chunks and works on them over time, making your app feel faster without actually increasing raw performance.
Summary
- Concurrent rendering lets React pause, resume, and prioritize rendering tasks.
- It improves responsiveness by keeping the UI interactive during long updates.
- Enabled through APIs like
useTransition,useDeferredValue, and the Fiber architecture. - Especially useful for search filtering, data fetching, and large list rendering scenarios.
Similar questions
Guides