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…
Archive
All posts
56 notes in the garden
- 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…
- React Internals · Part 028 min read
createRoot - FiberRoot and HostRoot
createRoot(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…
- React Internals · Part 0111 min read
Bootstrap - Packages, JSX and the Dispatcher
react 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…