React is an opensource JavaScript library which is used to build web interfaces using components. What makes React really cool is the fact that it can be used to make re-usable components. In addition, it is very flexible and has a huge community.
As a web developer, the DOM (Document Object Model) should not be a new concept. But to refresh your memory, the DOM basically represents a web page in a hierarchical tree-like structure. This web page is also known as a document and it is kinda an object-oriented representation of the web page. You really get to appreciate the DOM when you try to incorporate certain functionalities into your web page or manipulate it with JavaScript. Through the DOM, you can target specific HTML elements and modify them accordingly. The DOM was built using an API which makes it language agnostic. This means you must not necessarily use JavaScript to manipulate it.
Every React developer should understand what the virtual DOM entails. Usually, rendering a web page is fast. But when the DOM is manipulated where a specific item changes, the entire webpage is re-rendered which kind of slows everything down. This is where the virtual DOM comes in. The virtual DOM is a lighter abstraction of the DOM which is saved somewhere in the browser's memory. The virtual DOM does not replace the real DOM. It aids in making the rendering of web pages more efficient. The state you want the UI to be is first specified and when changes are made to the virtual DOM, it compares it with the changes just before it was updated. Once the element that was changed is identified, only that element is targeted and updated on the real DOM. Without the virtual DOM, the entire page could be re-rendered because of a tiny update.
Learn more here.
Top comments (0)