Building a Reconciler from Scratch

Building a Reconciler like React from scratch

I started with a simple goal of understand how React actually works once JSX disappears. Not at the API level, but at the level where trees are compared, work is scheduled, and DOM updates are delayed on purpose.

At some point, the experiment crossed a line — I had a working reconciler with hooks, effects, scheduling, and a commit phase. That’s when I stopped calling it an experiment.

The naive approach: recursion

function render(element, container) {
  const dom =
    element.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type)
  const isProperty = key => key !== "children"
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = element.props[name]
    })
  element.props.children.forEach(child =>
    render(child, dom)
  )
  container.appendChild(dom)
}

Why recursion breaks down

Recursion feels natural when walking trees.

The problem is control.

Recursive rendering:

• cannot pause
• cannot be prioritized
• blocks the main thread

Once rendering starts, you’re stuck until it finishes. That’s unacceptable for large or frequently updating UIs.

This is the exact pressure that led to Fiber.

The conceptual fix: separating rendering from committing

The fix was conceptual:

Rendering should decide what changes.
Committing should decide when those changes happen.

Once that boundary existed, the rest of the system became easier to reason about.

Fiber as a unit of work

Instead of recursion, I switched to explicit units of work.

Each node in the tree becomes something that can be:

• processed
• paused
• resumed
• abandoned

This single change explains most of React’s modern architecture.

You don’t render a tree.
You process work units.

Next steps

This stage was about unlearning naive rendering.

Once rendering stopped being “just walk the tree”, everything else — scheduling, reconciliation, hooks — had somewhere to attach.

The rest of the system builds on this idea.