What are React's concurrent features and how do Transitions work?

React 18's concurrent features allow React to prepare multiple versions of the UI simultaneously, interrupting lower-priority work for higher-priority updates. Transitions mark state updates as non-urgent, allowing React to keep rendering the current UI while computing the transition in the background. startTransition(() => setFilter(newFilter)) — the filter update is "deferred" until React has bandwidth. If a higher-priority update arrives (user types), React abandons the in-progress transition and starts fresh. How it works under the hood: React maintains two rendering trees. The "urgent" tree is what the user sees now. The "background" tree is what React is computing for the transition. When the transition finishes, React atomically switches. If the transition is abandoned, the background tree is discarded — no wasted DOM mutations. Prioritization: React 18 uses a "Lanes" model — discrete inputs (clicks, typing) are SyncLane (highest priority), continuous inputs (scrolling) are InputContinuousLane, transitions are TransitionLane, and data fetching/background work is IdleLane. The scheduler always works on the highest-priority lane first.