React Internals · Part 1012 min read
Hooks on Mount
A function component's first render runs inside renderWithHooks. It points the global hooks dispatcher (ReactSharedInternals.H) at the mount implementations, then calls your…
Archive
All posts
18 notes in the garden
- React Internals · Part 1415 min read
React Compiler - How It Works
React 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…
- React Internals · Part 0611 min read
The Work Loop - Render Phase
performWorkOnRoot decides whether this render may be time-sliced, then calls renderRootSync or renderRootConcurrent. Both clone the HostRoot into a work-in-progress fiber…
- React Internals · Part 1510 min read
Rendering With vs Without the Compiler
The 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…
- React Internals · Part 2119 min read
Walkthrough: setState to Pixels
A 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…
- React Internals · Part 2018 min read
Walkthrough: First Render End to End
createRoot(el).render(<App/>) renders nothing synchronously. It builds the root objects, attaches the event listeners, queues one DefaultLane update and books a microtask. The…
- React Internals · Part 139 min read
The Event System
React 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…
- React Internals · Part 0510 min read
The Fiber Data Structure
A 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…
- React Internals · Part 0410 min read
Lanes and the Scheduler
A 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…
- React Internals · Part 039 min read
root.render - Scheduling the First Update
root.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…