Introduction to React : Real DOM & Virtual DOM
Tags: webdev, beginners, tutorial, react
Published: 2021-08-31 15:20:36

Hello Readers!

I have been writing posts about *JavaScript* for a couple of months now. A strong foundation of JavaScript is a *prerequisite* for learning *React.JS*.

I have been working and developing projects with *React.JS* for the last one year and I have found it very flexible and useful for building user interfaces and process of developing web applications becomes easier with React.JS. 

First of all, let's have a look on what React.JS is and why it is so familiar nowadays among developers. 

### What is React?

:black_medium_small_square: React is an efficient, flexible and open-source *JavaScript Library* for building simple and scalable front-ends, created by *Facebook*.
:black_medium_small_square: It is basically used to build *Single Page Applications*. It also allows us to create *reusable* UI components. 
:black_medium_small_square: React.JS is *not a framework* of JavaScript like Angular or React Native.
:black_medium_small_square: It is the *View* layer of *MVC (Model View Controller)* application.

### How Does React Work?
Instead of manipulating the browser's real DOM directly, React creates a virtual DOM in memory. React finds out what *changes* are made and only manipulates the *virtual DOM* before changing anything in the *real/browser's DOM*.
To understand it in a better way, we need to understand the difference between Real/Browser's DOM and React's virtual DOM.

#### What is Real/Browser DOM?

*DOM* stands for *"Document Object Model"*. It represents the entire UI of the *web application* as a *tree data structure*.

>In simpler terms, it is a *structural representation of the HTML elements* of the web application.

![Real/Browser DOM image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj7waqg382e8txgf28mq.jpg)

Whenever there is a change in the *state of application UI*, the DOM gets *updated* and represents that change. With every change, the DOM gets manipulated and *re-rendered* to update the application UI, which affects the performance and makes it slower.

Hence, with more UI components and complex structure of the DOM, the DOM updates will be more costly as with every change it needs to be re-rendered.  

#### What is React's Virtual DOM?

To make the performance of the Real DOM better and faster, the concept of Virtual DOM arrives. The Virtual DOM is nothing but the virtual representation of the DOM. 

> But the key difference is, every time with every change , the virtual DOM gets updated instead of the real DOM.
 
Like, *real DOM* , *virtual DOM* is also represented as a *tree structure*. Each element is a *node* in this tree. When a *new item* is added to the application UI, a node is added to the tree as well. If the *state* of any of these elements changes, a *new* virtual DOM tree is created. The virtual DOM *computes* the best possible way or we can say the *minimal operations* on the real DOM to make changes to the real DOM. Thus, it makes efficient and better performance by reducing the cost and operations of re-rendering the whole real DOM. 

![Virtual DOM Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6ybb6v0bpitt2384cq2.png)

Now that we have the basic understanding of Real and Virtual DOM, let's focus on how *React* works using the *Virtual DOM*.

:small_orange_diamond: In React, each UI is an individual *component* and each component has it's own *state*. 
:small_orange_diamond: React follows the *observable pattern* and observes the changes of the states.
:small_orange_diamond: Whenever a change is made in the state of any component, React *updates* the *virtual DOM tree* but does not change the *real DOM tree*
:small_orange_diamond: After *updating*, React then *compares* the *current version* of the *virtual DOM* with the *previous version*.
:small_orange_diamond: React knows which *objects* are changed in the *virtual DOM*, based on that it *only* changes those objects in the *Real DOM*, making *minimum* manipulating operations.
:small_orange_diamond: This process is noted as *"diffing"*. A picture below will clear the concept more. 

![Diffing Process (source: https://programmingwithmosh.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ux2o2yg5lfrvwut60spp.png)

In this image, the *red circles* are the *nodes* that has been changed. That means, the *state* of these components are changed. React computes the difference of the previous and current version of the *Virtual DOM tree* and the whole parent sub-tree gets re-rendered to show the changed UI. Then the updated tree is *batch updated* (This means that updates to the real DOM are sent in batches, instead of sending updates for every single change in state.) to the Real DOM.

To get even deeper knowledge about it, we need to know about `React render() function`. 

Prior to that, we need to know about some most important *features* of React. I will not dive into deeper knowledge about it as I will write elaborately in other separate posts later. But for now what we need to know is: 

:small_blue_diamond: JSX
*JSX* stands for *JavaScript XML*. It is a *syntax extension* of JS. By using JSX, we can write *HTML structures* in the same file that contains *JavaScript code*.

:small_blue_diamond: Components
Each UI in a React app is a *component*. Components are *independent* and *reusable* bits of code. A single application may have multiple *components*. 
Components can be of two types, *Class Components* & *Functional Components*. `Class Components` are *stateful* as they can use their *"state"* to change the UI. `Functional Components` are *stateless* components. They act as a *JavaScript function* that can take an *arbitrary parameter* called *"props"*. 
Recently, *React Hooks* are introduced to use state within the Functional Components. 

:small_blue_diamond: Lifecycle Methods
*Lifecycle methods* are special methods *built-in* to React, used to operate on components throughout their duration in the DOM. Every component in React goes through a lifecycle of events.
 
**The `render()` method is the most used *lifecycle method*.** 

It is the only required method within the *React Class Components*. So, `render()` is called in every class component. 
*render() method* handles the rendering of the component to the UI. The render() method contains all the logic that should be displayed on the screen. It might also contain a *null* value, if we don’t want to show anything on the display.

An *example* is shown below:

```js
class Header extends React.Component{
render(){
      return <div> React Introduction </div>
   }
}
```
This example will show the JSX written inside the render() method.

When a *state* or *prop* within the component is updated, the *render()* will return a different tree of React elements. 
React then *calculates* how to update the UI to match the most *recent tree changes*. At first, React updates its *virtual DOM* and updates only the object that have changed in the *real DOM*.

##### In the next posts, I'll write about the features of React in Details. If you like this post please save, like and press unicorn and also follow me to keep an eye on my other posts.