facebook /

React

Live map
View repository
Snapshotmain · eb8feb7

How element trees become scheduled Fiber work, committed host mutations, and streamed server components.

Click a building or route
Choose a path

Schedule an element-tree update, reconcile Fibers, and commit the minimum host mutations.

System map8 components · 9 connections
130%
React rendering city architectureFollow a client update through the central loop; the Flight Terminal shows the separate server-component payload path.React element treechildren + lane + Fibe…priority + callbacktime slice + selected …finished Fiber tree + …insert, update, remove…mounted nodes and even…DOM RootUpdate LanesReactPublic APICooperativeSchedulerFlightTerminalFiberReconcilerCommit PhaseBrowser DOM
Connections
BuildingsEntryServiceComputeStorageRuntimeToolingExternal

Terms, in plain English

ElementAn immutable description of what a component should render, usually created from JSX.

How to study this repo

  1. 1
    Begin at createRoot

    Trace root.render into updateContainer and note where ReactDOM hands control to the reconciler.

  2. 2
    Separate render from commit

    Compare ReactFiberBeginWork with ReactFiberCommitWork; one computes intent, the other changes the host.

  3. 3
    Study priority last

    Once the core loop is clear, follow lanes and Scheduler callbacks to understand concurrent rendering.