Concurrent Mode is a React rendering mode that breaks rendering into smaller units, allowing work to pause, resume, or be abandoned so higher-priority interactions remain responsive. section 1.4.1 section 13.3
Consider a product list filtered on every keystroke. Without prioritization, filtering and list reconciliation can make the text box lag. Concurrent Mode can pause the expensive list update so the typed text appears first, then continue the filtering work. section 1.4 section 1.4.1
Concurrent rendering supports several coordinated behaviors:
- Keeps the existing interactive UI visible while a newer page, list, or data-dependent state is prepared in memory. section 1.4.1 section 13.3
- Works with Suspense to pause components waiting for code, assets, or data and display deliberate fallback content. section 1.4.2
- Uses useTransition and useDeferredValue to delay nonurgent updates, expose pending state, or let selected components keep using an older value. section 13.4
- Uses SuspenseList to control the reveal order and number of visible Suspense fallbacks. section 13.4
Prioritizing a user selection
An experimental setup renders the application through ReactDOM.unstable_createRoot. A selection update can then be wrapped with startTransition so React may keep the previous details view visible while the new one loads: startTransition(() => setSelectedUser(nextUser)); The isPending value can indicate that the transition is still underway. section 13.1 section 13.4
Figure 1.15 In Concurrent Mode, React can pause longer-running updates to quickly react to user interactions.
Shows how Concurrent Mode pauses longer-running rendering to respond quickly to user interactions. section 1.4.1
