Concurrent Rendering
Concurrent React can prepare multiple versions of the UI simultaneously and interrupt background renders for urgent user input.
Mental Model
"The Master Chef with Multiple Burners: While simmering a 2-hour stew on low heat, the chef pauses instantly to flip a sizzling steak before it burns."
Interactive Engine Simulation
Executable Code Snippet
1// Urgency separation
2const [query, setQuery] = useState("");
3const [isPending, startTransition] = useTransition();
4
5const handleChange = (e) => {
6 // Urgent: Update input
7 setQuery(e.target.value);
8
9 // Non-urgent: Update heavy list
10 startTransition(() => {
11 setHeavyList(e.target.value);
12 });
13};- 01.Component re-renders are triggered by state or prop changes.
- 02.Reconciliation algorithm diffs the Virtual DOM to minimize actual DOM updates.
- 03.Automatic batching optimizes multiple state updates into a single render cycle.
01. Cooperative Multitasking
Concurrent rendering is the most significant change in React's history. Instead of rendering being a single, non-stop operation, React can now **pause** work to handle a more urgent task (like a user typing) and then resume the background render. It uses a "Time Slicing" mechanism to stay responsive.
Work Prioritization
- User Input Priority 1
- Transitions Priority 2
- Offscreen Priority 3
02. Two-Pronged Strategy
Concurrency is enabled by **Interruptibility**. React prepares multiple versions of the UI in memory (the "In-Progress" tree) and only manifests them to the DOM when the work is complete. This is like editing a video in the background while still being able to use your computer.
Architectural Advice
"Transitions are the primary tool here. If a state update is causing input lag, wrap it in 'startTransition'. This tells React: 'This update is important, but don't freeze the whole app for it'."