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…
Archive
All posts
30 notes in the garden
- 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…
- React Internals · Part 002 min read
React Internals: from createRoot to pixels
React 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…
- React Internals · Part 0712 min read
beginWork and Reconciliation
beginWork(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…
- React Internals · Part 0912 min read
Commit Phase - Mutation, Layout, Passive Effects
completeRoot → commitRoot applies a finished work-in-progress tree to the DOM synchronously and without yielding, in fixed sub-phases. Before mutation reads DOM state…
- React Internals · Part 0810 min read
completeWork - Building DOM Nodes
completeWork 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 →…
- React Internals · Part 1210 min read
setState: dispatchSetState and Batching
setCount(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…
- React Internals · Part 1110 min read
Hooks on Update
On a re-render, renderWithHooks installs HooksDispatcherOnUpdate. Each hook call then clones the matching node from the committed (current) fiber's hook list onto the…