What the heck is the Virtual DOM?
source: react-js.us

If you’ve worked in React you’ve heard of the illusive Virtual DOM, but what actually is it, and how is it different from the regular DOM?

To start let’s take a step back and look at the DOM.

“The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.” -MDN Web Docs

Essentially, we use JavaScript to work with and manipulate the node elements on a page and the DOM is what allows us to make that connection.

What are nodes? Everything. Everything is a node. From the inner most text to the document itself everything on the DOM is a node.

The biggest problem with basic JS DOM manipulation is that the DOM isn’t able to update any one item at a given moment, it has to re-render everything to change the one thing. On top of that, as more and more JS frameworks are becoming popular and faster, this manipulation has become slow and outdated. So as the commonality of single page applications and frameworks grow, there had to be a better way to manage this… Enter The Virtual DOM!

“The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.” Straight from the source, -ReactJS Docs

The way we create a Virtual DOM is through React Components. By importing Component from react into our application, we have access to components.

To make any HTML code a static React Component, you just need to return HTML Code in React’s render() method. This is done in the form of JSX, which is like a blend of JavaScript and HTML. Render is one of React’s lifecycle methods, which you can read more about here, but for now know that render is the point in our code when we start to build the react element tree.

Whenever the state in our application changes, the Virtual DOM starts to change/add/update it’s element tree, and the actual DOM remains the same. Then, React compares our Virtual DOM tree to the ‘snapshot’, or previous state of the virtual DOM tree. This process is called ‘diffing.’

Finally, React changes only those elements that have changed on the real DOM.

Essentially, React takes out the tedious traversing of the DOM tree and does this lower level stuff to make everything easier for developers, and run way more efficiently and smoothly.

To Recap:
['Gracie Mcguire']
['Coding', 'Flatiron School', 'React', 'Programming', 'Virtual Dom']