How React Works · Part 068 min read
Fiber - Work You Can Pause
Why React replaced recursion with fibers, how a render walks a linked tree one unit at a time, and what it means that React can pause or throw away unfinished work.
Archive
#react
30 notes match these filters
- How React Works · Part 058 min read
Reconciliation - Finding What Changed
How React compares the new element tree with the old one in roughly linear time, why type and key decide whether state survives, and what the comparison hands to the commit.
- 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…
- 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…