React Internals Deep Dive 2 - Initial Mount, how does it work?

In this video, we will look into the details about how React construct fiber nodes and commit the tree structure into real DOM.

My blog post for this episode https://jser.dev/2023-07-14-initial-mount/

We would touch a few concept (the understanding is based on the understanding till this video, might be wrong)
1. fiberNode, sort of similar to DOM node, it is the basic node of React internal representation of a web app
2. fiberNodeRoot, the root of the fiber tree.
3. fiberNode.stateNode, the real component for this node, like the HTMLElement, or React Component
4. fiberNodeRoot.current, the real root of fiber tree. Think of this as a false head for linked list, which makes the node changes on first node much easier.
5. workInProgress, the current node which is being processed
6. fiberNode.alternate, since we only need compare previous state to diff, so alternate is reference for a fiber node in previous and next state.

About the process

1. workLoopSync calls performUnitOfWork repeatedly by moving workInProgress.
2. performUnitOfWork construct child nodes, when there is no child node, completeWork creates DOM elements and place it in the DOM fragment
3. when all work is performed, the DOM fragment is done, commitRoot is used to insert the DOM to DOM container of the root.

Hi I'm a JavaScript engineer who is not good at algorithms,
and currently practicing leetCode & BFE.dev. If you are interested, maybe we can learn together.