Understanding React's UI Rendering Process (understanding virtual dom in depth)
Before getting started let's discuss this basic question.
What does react do?
- React allows you to write maintainable and performant code by using the concept of components. Components allow you to focus on describing the UI you want. rather than focusing on the details of how the UI actually gets inserted into the page.
Simple Component using JSX
This component internally returns a react entity called elements which kind of looks like this.
It's just a plain object. Let's understand the properties one after another.
type The type property is a string reference to the HTML tag. React internally calls it a Component Element. When we do import main from "../components/main" the name of the component becomes the type that is imported.
key Used to uniquely identify elements among siblings. This is created when we are manually creating a bunch of children's i.e when we map through the array and render a bunch of components with different data. We use a key while rendering those and hence the key is substituted to this property. Example
this.state.data.map((item,i) => <li key={i}>Test</li>)
ref ref is reference to a actual DOM node. If you ever have used the create ref function or the useRef hook that's where this values end up.
$$typeof This is actually a safety feature. Its values are always a symbol. What is a symbol? So if you have a compromised server that you are making an API call and you get back some data and you try to render it through your components. React will straight up reject that.
Props In our case, we just had 1 child that is an h1 hence type is an h1. key and ref are null And its children was a text string with "look ma!" and with id title. Children can be an object or array of an objects.
Review
So writing to DOM and rendering DOM is a very expensive task. This is where react comes in.
This object and its children that is known as virtual dom.
Is it really expensive to write to the dom but its really easy to generate these objects and they can do it super fast.
Reconciliation.
Reconciliation is the process through which React updates the DOM. When a component's state changes, React has to calculate if it is necessary to update the DOM. It does this by creating a virtual DOM and comparing it with the current DOM. In this context, the virtual DOM will contain the new state of the component.
React creates a tree of elements every time the render function is called. So to be efficient we need a way to tell what's the difference between the DOM and the virtual DOM so that we are only changing the Elements in the DOM that needs to be changed.
Reconciliation houses the diffing algorithm to understand what part of the DOM needs to be replaced.
Example:
Suppose we have a list of product list and we clicked to get one individual product.
As we clicked the element product list goes away hence it's also removed from the DOM.
There is a difference between the native DOM element and the component element.
Reconciliation - DOM element:
- Over here as the DOM element class name is changed. React find the DOM node and update the class name and nothing else and it will recurse on any children if there are any.
Reconciliation- Component element:
- React updates the prop of the underlying component instance to match the new element. And the render method is called. The diff algorithm recurses on the old result and the new result until the end of the tree.
Reconciliation - Children
- In this scenario reacts goes and see for the first and element and checks in the old result both are the same and hence moves to next the next again same now when it moves to next it sees third these were not present in the DOM before hence react appends it to the DOM.
What if we change the sequence?
Over here we see the sequence the older items are there is just we have added a new DOM node and changed the sequence but react doesn't understand this. It goes and sees the first node is changed and remove the previous DOM node that is star wars and replace it with Spaceballs similarly for the second and sees the third has been added hence adding the third one.
Here we see we are rendering all of the elements again and again but we can save these things with keys.
- over here it has keys with it now lets see what happens if we append 1 DOM element to the beginning of this unordered list.
- Now react goes down the tree and sees key best has start wars which was already present, second best with star trek is also present but actual best with spaceballs was not present and it as been added hence we will add that to the DOM node.
Rendering
so here the render function of the React DOM is responsible for creating the react virtual DOM create the element tree which we discussed in the beginning and add that to the actual DOM.
FYI react and react dom is two different library hence react work is just to do the diffing part not anything more than that. React DOM creates the virtual DOM and append to the actual DOM.
React Fiber
The actual render happens with react fiber.
React fiber sits between the the element and the DOM node and inserts the element to the DOM node.
Conclusion:
We write a component.
We get a component instance.
Its has state it takes props it computes it.
Then it generates a tree of elements. That tree of element is our virtual dom.
And with that the reconciliation process starts.
Then its handed of to the rendering process.
Then the react DOM takes it and actually generates the DOM node with React fiber.
Reference:
https://www.youtube.com/watch?v=i793Qm6kv3U