Concurrent rendering is a new behind-the-scenes mechanism in React 18 that allows React to prepare multiple versions of the UI at the same time, making rendering interruptible and prioritizing urgent updates for a smoother user experience [citation:6].
Concurrent rendering is a fundamental change to React's internal rendering architecture, introduced as the cornerstone of React 18 [citation:6]. It is not a specific feature, but rather a new capability of the React renderer that enables it to work on multiple state updates in the background without blocking the main thread [citation:4]. This is a significant shift from the previous synchronous rendering model, where a render, once started, could not be interrupted until the entire component tree was processed [citation:1].
Think of it like a smart traffic system: before, rendering was like a single-lane highway that processed one car (task) at a time, and traffic would grind to a halt during a large convoy. Concurrent rendering upgrades this to a multi-lane highway with an intelligent traffic controller that can pause a slow-moving convoy of trucks (a heavy, low-priority update) to let an ambulance (a high-priority user interaction like a button click) pass immediately, then let the trucks resume [citation:3].
Interruptible Rendering: The renderer can pause work on a large component tree in the middle of an update, switch to a more urgent task, and then resume the original work later. This prevents complex updates from blocking the UI [citation:1][citation:5].
Time Slicing: Large rendering tasks are broken down into smaller chunks (or slices). After each chunk, React yields control back to the browser to check for any pending high-priority tasks like clicks or keyboard inputs, keeping the application responsive [citation:2][citation:10].
Priority-Based Scheduling: Not all updates are created equal. React's scheduler assigns different priorities to updates. An urgent update (e.g., user input) is processed immediately, while a non-urgent update (e.g., data fetching for a new chart) can be processed later in the background [citation:2][citation:3][citation:10].
createRoot: Concurrent rendering is opt-in and is enabled by using the new root API (ReactDOM.createRoot) instead of the legacy ReactDOM.render [citation:2][citation:6].
It is crucial to understand that concurrent rendering does not make your code execute faster. Instead, it changes when your code runs [citation:10]. React's scheduler intelligently decides which updates are most important for the user to see and feel right now, and which can wait. This cooperative scheduling model is what allows your application to remain responsive, even under heavy computational loads [citation:10].
