React Rendering & Commit phases

Context

This post is part of my post series that complements the "Build your own React" tutorial by Rodrigo Pombo.

In this post...

In step 5, Rodrigo introduced the rendering and commit phases, but the distinction and the role of each phase was not clear. Let's change that!

What happens when a React program runs?

Remember these first lines in the tutorial?

1 | const element = <h1 title="foo">Hello</h1>
2 | const container = document.getElementById("root")
3 | ReactDOM.render(element, container)

After you have implemented the entire Didact library, the above three lines will:

1. Build a new virtual DOM, which is basically a tree whose nodes are elements created from createElement (line 1).
2. Compare the nodes in the virtual DOM with the corresponding fibers in the current fiber tree in the reconcileChildren function (officially called diffing by React team). The result of this process is...
3. A new Fiber that contains the message denoting to the commit phase what to do with it (effectTag), and the necessary data to perform that action.
4. These fibers are sent to the commitRoot function to be reflected into the real DOM.

The first 3 steps belong to the rendering phase, while the last step is the commit phase. So, the rendering phase includes:

• Rendering the virtual DOM
• Reconciliation / Diffing between the wip and current tree
• Preparing data for the commit phase

Notes on the use of the word "rendering"

If you go on and read more posts about React internals, you will see people abusing the word "rendering". They say:

• Rendering vs. commit phase (as in Rodrigo's language)
• Rendering the virtual DOM
• Rendering the real DOM (i.e the commit phase)

... so just be on the look out for that.

Notes

Notice how the Fiber is only used in the rendering phase. That means while the browser can temporarily put on hold the rendering phase to work on other high-priority tasks, the commit phase cannot be interrupted.