What’s the difference between Real DOM and Virtual DOM in React?

What’s the difference between Real DOM and Virtual DOM in React?

The DOM (Document Object Model) is an object-oriented representation of a web page that can be modified with a scripting language like Javascript. DOM represents the document in terms of nodes and objects. This way, programming languages can connect to the page. With DOM, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. 

The Virtual DOM is a representation of a DOM object such as a lightweight copy. One thing, which makes React and its Virtual DOM unique is it is simpler than the other approaches to making Javascript reactive. 

React uses one-way data binding to make things simpler. For example, every time you type in an input field in a React UI, then it does not directly change the state of that component. Rather than, it updates the data model that causes the UI to be updated, and the text which you typed into the field appears in the field. 

Your email address will not be published.

Sign up for the free Newsletter

For exclusive strategies not found on the blog

Sign up today!