When you're working with a web application built using frameworks like React, there are often many changes happening in user interface(UI). The virtual dom is a concept that helps optimize these changes and improve performance.
1. Traditional DOM
The document object model(DOM) is representation of the html structure of a web page. It defines how elements are organized, their attributes and their relationship with each other. Whenever there's a change in the application's state or data, the DOM needs to be updated to reflect those changes.
2. Virtual DOM
The virtual DOM is like a lightweight copy or representation of actual DOM. It's a javascript object that keeps track of current state of the ui. When changes occures in your application, the virtual dom is updated instead of directly modifying the actual DOM.