React Internals

18 notes match these filters

Clear filters

React Internals · Part 10Oct 25, 202612 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…
React Internals · Part 14Oct 25, 202615 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 06Oct 25, 202611 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 15Oct 25, 202610 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 21Oct 25, 202619 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 20Oct 25, 202618 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 13Oct 25, 20269 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…
- #events
- #react
- #react-dom
- +1
React Internals · Part 05Oct 25, 202610 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…
- #data-structures
- #fiber
- #react
- +1
React Internals · Part 04Oct 25, 202610 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…
- #concurrency
- #lanes
- #react
- +2
React Internals · Part 03Oct 25, 20269 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…