- **Epistemic status:** #seedlings The virtual DOM is a programming concept where the [[Document Object Model (DOM)]] is represented “virtually” where the UI is kept in memory and then synced with the real [[Document Object Model (DOM)]] we spoke of before. This concept became popular with React because it uses the library ReactDOM to reconcile the virtual DOM with the real one. When working with React or Vue, you tell it what state you want the UI to be in and React makes sure it matches the [[Document Object Model (DOM)]]. This makes managing state way easier since it abstracts out the attribute manipulation, event handling, and manual [[Document Object Model (DOM)]] updating. ### Benefits of the virtual DOM over the original DOM Managing the [[Document Object Model (DOM)]] performing calculations, changing attributes or event handling we need to utilize the [[Document Object Model (DOM)]] APIs and can reduce performance significantly. When the [[Document Object Model (DOM)]] was released in 1998 it was not envisioned that the page was going to be updated as frequently as we do today. The virtual DOM was created to solve this problem of needing to update frequently the [[Document Object Model (DOM)]] in a more performant way. The virtual DOM can be manipulated and updated without using the [[Document Object Model (DOM)]] APIs. Once all the updates have finished on the Virtual DOM, it will look for the specific changes needed to be made to the original DOM and make them targeted and optimized in a process called <a href="https://reactjs.org/docs/reconciliation.html" rel="noopener" target="_blank">reconciliation</a>. --- ## References - “Reconciliation – React.” Accessed April 26, 2022. <https://reactjs.org/docs/reconciliation.html>. - React Kung Fu. “The Difference between Virtual DOM and DOM.” Accessed April 26, 2022. <https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/>. - bitsofcode. “Understanding the Virtual DOM,” December 24, 2018. <https://bitsofco.de>. - “Virtual DOM and Internals – React.” Accessed April 26, 2022. <https://reactjs.org/docs/faq-internals.html>.