What is the Virtual DOM?
React.js uses virtual DOM for manipulate or create changes on the document, The Virtual DOM is a concept to improve the efficiency of updating the user interface in web applications. It serves as an abstraction layer that sits between the actual Document Object Model (DOM) and the React components. Before virtual DOM, whenever a component’s state or props changed in an application, the entire document or application had to be reloaded to reflect that change visually. This way of doing things was difficult and made the overall experience worse for users. To address this issue, React.js employs the virtual DOM.
In the concept of the virtual DOM, React.js creates a replica of the DOM once a document is loaded. Subsequently, when a node or component within that document undergoes a change, the alteration is first applied to the virtual DOM. Only afterward is the actual DOM updated. This approach ensures that React-based web applications can effect changes without requiring a full reload of the application, resulting in a smoother user experience. This concept represents a powerful feature of React, contributing significantly to its popularity since 2015.
Day 1 of MERN-Stack Journey: Unveiling React.js Basics for Beginners
After completing vanilla JavaScript with Node.js, we are now moving into exploring other parts of the MERN stack from a beginner’s level. In this phase, we started with React.js. This session will span over 90+ days. On day 1, I explored the simple basics of React.js and understood its abilities, features, and advantages.