Introduction to React : Real DOM & Virtual DOM

#webdev #beginners #tutorial #react

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?

◾ React is an efficient, flexible and open-source JavaScript Library for building simple and scalable front-ends, created by Facebook.
◾ It is basically used to build Single Page Applications. It also allows us to create reusable UI components.
◾ React.JS is not a framework of JavaScript like Angular or React Native.
◾ 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.

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.

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

🔸 In React, each UI is an individual component and each component has it's own state.
🔸 React follows the observable pattern and observes the changes of the states.
🔸 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
🔸 After updating, React then compares the current version of the virtual DOM with the previous version.
🔸 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.
🔸 This process is noted as "diffing". A picture below will clear the concept more.

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:

🔹 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.

🔹 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.

🔹 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:

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.