An investigative guide to React JS[DOM, Virtual DOM and JSX] Part-IV

Highlights of part III

• JS’s real purpose is to add dynamicity to the webpage
• Most of the time it happens through user interaction with the page. These are called events.
• We create JS functions to add dynamicity. These are called event listeners.
• We access the DOM through DOM queries.
• Events detection(Clicking,selection,page resize etc) → Triggers JS function(contains DOM queries) → DOM and Event listeners connection.
• This process becomes complex when you build large interactive applications like Facebook

What makes DOM manipulation slow?

DOM is basically a tree data structure. The tree data structure makes the DOM changes and updates faster. Then what makes it slow? whenever we update a node(parent), its children are re-rendered(i.e updated) even if there is no change in children. This unnecessary re-renders makes it slow if the application contains many nodes and children. Remember update is fast because of tree data structure but painting on the screen makes it slow(i.e display). This is because whole children associated with the updated node is re-painted on the screen.

In a browser context , DOM objects are javascript object

React just adds another layer before the original DOM

Till now we have seen how HTML/CSS/JS works in the browser. Browsers always work with DOM. Frequently manipulating DOM in large applications costs performance. So we need to find an efficient way of manipulating DOM in browsers. Also, this way shouldn’t alter the browser DOM model. This leads us to the next thing whatever library/framework we create should always be an extra added layer before browser DOM works.

Different javascript libraries take a different approach to solving this problem. At the end of the day, it is the faster DOM update and display on the screen that matters

What is that extra layer React adds?

Well! React creates a replica of real-DOM. This is called Virtual DOM. This is as same as real-DOM but not reflected on the screen. Since it is not reflected on the screen(no painting on the screen), virtual DOM update is faster.

How do Virtual DOM works?

Virtual DOM is javascript objects which have key and value pairs. Every time an update occurs, a new virtual DOM is created. This essentially means some keys have changed in the JS object. New virtual DOM compares all the keys with old virtual DOM. It makes note of all the keys that have changed and whatever keys changed will be sent to the queue. This process is called ‘ Diffing’.If there are keys on the queue, it will be batch updated to real DOM. This process makes it faster.

Batch update means all updates in virtual DOM are combined together in single update while sending to real DOM

Note: These things are a super simplification of things for better understanding

Connecting the dots

Well! What does react actually brings to the table? Simple! it makes things easier

React doesn’t make things faster but easier

It may look strange at first but soon will make sense. These things like Browser, DOM, Virtual DOM, DOM manipulation, javascript etc happen simultaneously. So every now and then we need to go back to topics we have discussed earlier in the new perspective.

We know that layout and paint(display) are phases of browser processing of web pages.

Does Real-DOM re-render the whole page even if one element node changes?

Logically it shouldn’t because these are all simple things from the browser side they can improve and of course they did. Any changes to DOM can be split into two — one which affects layout(element and position) and the one which affects the look(colour, background etc).

One which affects the position — Reflow

One which affects the look — Repaint

Which one of them triggers re-render?

It is the Reflow that triggers re-render. This is intuitive because if any of the element’s position changes, the whole web page flow changes(i.e relative position of other elements). Therefore every element’s position is recalculated from scratch and the final output is Repainted again. This is an oversimplified explanation.

For the case of Repaint — for example, changing the element font colour — only the element which needs to change the colour is re-rendered and not all elements.

More the calculations lesser the performance — Hence Reflow makes DOM update slow

React doesn’t replace this because React communicates with DOM through the same DOM API. If reflow happens, react also do the same whole re-rendering.

Remember: React just adds an extra layer before the original DOM. So it doesn’t change the way the browser works. Therefore if someone says react makes the process faster, it is incorrect. It makes things easier.

I know I didn’t connect the dots perfectly. We will complete it in the next article.

Originally published at https://www.pansofarjun.com on March 10, 2022.