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.
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.
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?
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
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.