Skip to contentObsidian Garden
All posts

Series

React Internals

A source-level tour of how React 19 turns your components into pixels, from createRoot and lanes to fibers, hooks, the commit phase and the React Compiler.

Parts
18
Reading time
3 h 18 min
Updated
Start reading Begins with React Internals: from createRoot to pixels

You have written useState a thousand times. This course opens the box and follows the real code paths inside React: what createRoot builds, how an update picks a priority, how the work loop walks the fiber tree, where your hooks are stored, and what the commit phase does to the DOM. The last parts show how the React Compiler changes your components so React can skip work it would otherwise redo.

It is written for working React developers who want a working model of the runtime instead of folklore. You do not need to have read React's source before. Every claim links to the exact lines on GitHub, and every page is pinned to React v19.3.1, so the line numbers stay true.

Parts

  1. Index: from createRoot to pixels
  2. Bootstrap: packages, JSX and the dispatcher
  3. createRoot: FiberRoot and HostRoot
  4. root.render: scheduling the first update
  5. Lanes and the Scheduler
  6. The fiber data structure
  7. The work loop: render phase
  8. beginWork and reconciliation
  9. completeWork: building DOM nodes
  10. Commit phase: mutation, layout, passive effects
  11. Hooks on mount
  12. Hooks on update
  13. setState: dispatchSetState and batching
  14. The event system
  15. React Compiler: how it works
  16. Rendering with vs without the Compiler
  17. Walkthrough: first render end to end
  18. Walkthrough: setState to pixels

The learning path

The parts

18 parts
  1. 00React Internals: from createRoot to pixelsReact does its work in two phases. The render phase is pure and can be interrupted (in practice only for transition, retry and idle work, because the first mount and clicks render…2 min read
  2. 01Bootstrap - Packages, JSX and the Dispatcherreact is a small package. It builds plain element objects (jsx()) and holds one shared mutable object, ReactSharedInternals, with slots like H (the hooks dispatcher) and T (the…11 min read
  3. 02createRoot - FiberRoot and HostRootcreateRoot(container) renders nothing. It checks the container, builds two linked objects, and attaches every event listener React will ever need to the container. The two objects…8 min read
  4. 03root.render - Scheduling the First Updateroot.render(<App />) does not render. It picks a lane (normally DefaultLane), wraps the element in an Update {payload: {element}}, stashes the update in a global concurrent queue…9 min read
  5. 04Lanes and the SchedulerA lane is one bit in a 31-bit integer. Every update gets one lane, and a render processes a set of lanes (a bitmask), so batching, priority, entanglement and "which updates did…10 min read
  6. 05The Fiber Data StructureA fiber is a mutable, long-lived object for one instance of a component, host element or text node. It is one unit of work and also one node in a tree. Fibers are linked with child…10 min read
  7. 06The Work Loop - Render PhaseperformWorkOnRoot decides whether this render may be time-sliced, then calls renderRootSync or renderRootConcurrent. Both clone the HostRoot into a work-in-progress fiber…11 min read
  8. 07beginWork and ReconciliationbeginWork(current, wip, renderLanes) does one of two things for each fiber. Either it bails out (props object identical, no scheduled update or context change, so it reuses…12 min read
  9. 08completeWork - Building DOM NodescompleteWork runs on the way up the tree, once all of a fiber's children are done. For a newly mounted host fiber it creates the real DOM node (createInstance →…10 min read
  10. 09Commit Phase - Mutation, Layout, Passive EffectscompleteRoot → commitRoot applies a finished work-in-progress tree to the DOM synchronously and without yielding, in fixed sub-phases. Before mutation reads DOM state…12 min read
  11. 10Hooks on MountA function component's first render runs inside renderWithHooks. It points the global hooks dispatcher (ReactSharedInternals.H) at the mount implementations, then calls your…12 min read
  12. 11Hooks on UpdateOn a re-render, renderWithHooks installs HooksDispatcherOnUpdate. Each hook call then clones the matching node from the committed (current) fiber's hook list onto the…10 min read
  13. 12setState: dispatchSetState and BatchingsetCount(x) is dispatchSetState(fiber, queue, x). It picks a lane from the current event priority or transition, and may compute the new state eagerly and drop the update when…10 min read
  14. 13The Event SystemReact doesn't attach your onClick to the button. When you call createRoot(container), it puts one capture and one bubble listener per native event type on the root container. On a…9 min read
  15. 14React Compiler - How It WorksReact Compiler (babel-plugin-react-compiler, stable 1.0 since 7 Oct 2025) is a build-time Babel plugin that rewrites each component and hook so it memoizes its own intermediate…15 min read
  16. 15Rendering With vs Without the CompilerThe reconciler has always had a cheap bailout: if a fiber's props object is the same reference as last time and it has no pending work, beginWork skips it and possibly its whole…10 min read
  17. 20Walkthrough: First Render End to EndcreateRoot(el).render(<App/>) renders nothing synchronously. It builds the root objects, attaches the event listeners, queues one DefaultLane update and books a microtask. The…18 min read
  18. 21Walkthrough: setState to PixelsA click reaches React through the listener createRoot put on the container. dispatchDiscreteEvent sets the update priority to Discrete, so setCount gets SyncLane. The update is…19 min read