Lanes, phases, batching, and why useDeferredValue exists.

React Fiber — Internals & Concurrent Rendering

React Fiber is the reconciliation engine introduced in React 16. It splits render work into small units (fibers) that can be interrupted, paused, and resumed — enabling concurrent features. Understanding Lanes, the render vs commit phases, and automatic batching explains why renders behave unexpectedly and how to optimise them.

Interactive Pipeline Flow

SetupCoreOutput

🎯 Trigger — setState / event

State update or event schedules a render. React batches multiple setState calls in the same event handler into a single re-render.

Architecture Diagrams

Lane priority model: how React decides what to render first.

Loading diagram...

Key Design Decisions

🏎️useTransition for expensive updates

Wrap non-urgent state updates in startTransition. React will render them at lower priority, keeping the UI responsive.

🔑Keys prevent full re-mounts

Always provide stable keys on list items. Avoid using array indices as keys for reorderable lists.

⚠️useLayoutEffect blocks paint

Only use useLayoutEffect when you must read or write layout (e.g. measure a DOM node). Prefer useEffect for everything else.

Discussion