React.js is a well known JavaScript library for building user interfaces. According to  Stackoverflow data for 2020, React ranked the second most popular web frameworks among professional developers. While setting aside talking about fundamental features in React like JSX, states and props, component life cycle, higher-order components or hooks let’s take a step back and look at a feature that makes React efficient. The Virtual DOM.

The DOM

Before we dive into Virtual DOM in React let’s try to understand what’s DOM and why we use it. MDN Web docs have a decent explanation defining what DOM is,

“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.”

Consider a scenario where we open a HTML file through our browser, the browser creates a tree-like structure from given HTML code known as DOM. Each point and intersection on this tree is known as a DOM Node. Everything is a node, from the innermost text to the document itself everything on the DOM is a node, like HTML elements, HTML attributes, plain texts, comments, tab characters etc.

#web-development #javascript #react #react.js #dom