Understanding React 16 Architecture: Scheduler, Reconciler, Renderer, Fiber, and the Render & Commit Phases

React 16’s architecture is divided into three layers: Scheduler, which prioritizes and dispatches tasks; Reconciler, which diffs the component tree to find changed nodes; and Renderer, which applies those changes to the DOM.

An example ClickCounter component demonstrates the flow: clicking the button increments state.count , Scheduler schedules the update, Reconciler identifies the changed span , and Renderer updates the DOM and runs the component’s lifecycle methods.

The core concept is the fiber node: every React element maps to a fiber that forms a fiber tree via return , child , and sibling links. Fiber nodes contain attributes such as alternate , effectTag , memoizeProps , pendingProps , and updateQueue , which together drive the update process.

Fiber creation occurs through createFiberFromTypeAndProps , and the root of the tree is represented by a FiberRootNode (rootFiber) with a current tree (the UI on screen) and a work‑in‑progress (wip) tree built during updates.

The render phase consists of two sub‑phases: “beginWork”, which traverses the tree depth‑first creating or updating child fibers, and “completeWork”, which finalizes each fiber, builds the updateQueue , and marks fibers with effectTag . All fibers with side‑effects are linked into an effectList .

The commit phase processes the effectList in three passes. The BeforeMutation pass invokes snapshot lifecycle methods and schedules passive effects; the Mutation pass performs DOM insertions, updates, and deletions based on Placement , Update , and Deletion tags; the Layout pass runs layout effects and class component lifecycle methods such as componentDidMount or componentDidUpdate .

After the button click, the complete flow is: Scheduler → Reconciler → beginWork → completeWork → effectList generation → BeforeMutation → Mutation → Layout, resulting in the updated UI and the execution of the component’s componentDidUpdate method.

The article concludes with a summary diagram of the entire update cycle and references for further reading.