Concurrent Rendering
Concurrent rendering lets React prepare multiple UI states simultaneously and choose which to show. It can pause rendering work to handle urgent updates (like typing) and resume less urgent work later.
Concurrent rendering is a chef who can pause making a complex dish to plate an urgent appetizer, then resume the complex dish exactly where they left off — the kitchen (main thread) never gets blocked.
Enabled by React 18, concurrent features include: startTransition (marks updates as non-urgent), useDeferredValue (defers re-rendering with a stale value), Suspense for data fetching (shows fallback while components load). React doesn't render faster — it renders smarter by prioritizing what matters. The old synchronous rendering model blocked the main thread; concurrent rendering yields between fiber units of work.
Concurrent rendering introduces the concept of 'lanes' — a bitmask priority system where each bit represents a priority level. SyncLane (user input) has the highest priority; TransitionLane is lower. React can start rendering a transition, detect a higher-priority SyncLane update, shelve the transition render, process the sync update, then resume the transition. This requires all render-phase code to be pure and idempotent because React may call it multiple times. Strict Mode's double rendering catches violations. The scheduler uses MessageChannel (not requestIdleCallback) for more predictable timing.
Concurrent rendering is React 18's ability to work on multiple UI updates simultaneously with different priorities. User input gets high priority (SyncLane), while transitions and data fetching get lower priority. React can interrupt a low-priority render to handle a keystroke, then resume. It uses lanes — a bitmask priority system — for scheduling. The key requirement is that render-phase code must be pure since React may call it multiple times.
Thinking concurrent rendering makes React faster. It doesn't reduce total work — it makes the UI more responsive by ensuring high-priority updates aren't blocked by low-priority rendering.