React JS : Virtual DOM
2 min read
Here let's look into what react JS is and what boost its performance through virtual DOM apart from the real DOM.
There is always been a hot talk about if react is a framework or library, for me its like due to high functionality and reach of reactJS lads tend to pretend its a framework rather than its originality of being a mere library.
DOM or Document Object Model is a Language neutral interface or to say an programming API for HTML and XML documents.
It defines the logical structure of documents and the way a document is accessed and manipulated. With this programmers can build documents, navigate their structure, and add, modify, or delete elements and content. DOM gives a tree like representation of whole HTML document.
This is how exactly a browser render's a webpage;
Which involves rendering engines for HTML and CSS using respective parsers to give the DOM tree, thus creating a render tree, resulting in layout the nodes followed by painting and displaying.
const element=document.createElement('h1'); const element=document.getElementById('id1');
Which involves complex algorithms for recalculation of values thus affecting the performance.
At any given time, ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the previous state Virtual DOM.
Also ReactDOM uses a algorithm to find minimum number of modifications to be done in the RealDOM which drastically improves the performance.
Hope you all got something to take in from here, leave out impressions and let me know any queries.
Follow on twitter
Connect on LinkedIn