Reconciliation and Virtual DOM in React

What is React?

It is a JavaScript library for building user interfaces, developed by Facebook. It's often referred to as a framework but it's a library only React is not enough to complete a project. Developers need extra tools like redux, react-router, jest, etc.

If you know about MVC( Model View Controller) architecture, here Facebook has its own refined and enhanced MVC architecture known as Flux, where React is the 'V'.

'V' in MVC

Flux has four components :

• Action
• Dispatcher
• Store
• View

As we can see in the above diagram. Here React is the View. When a user interacts with the app, the view creates actions. These actions produce new data and send it to the dispatcher. The dispatcher then dispatches these action results to the store. Store update the state and send an update to the view. That's how Flux architecture works.

Components

Component(a reusable piece of HTML code) is the heart of React. A component is a small feature that makes up a piece of the user interface. Each component is independent, reusable, and isolated. For eg.
Is it possible to write same piece of code again and again for different data? In e-commerce sites, there are product cards providing information about the product. By using components, we can write a piece of code and reuse it for different data.

Virtual DOM

So basically when you write JSX, it gets transpiled into old js by babel or other compilers. It invokes the React.createElement() function with some parameters as per your component and returns a plain JS object that is kept in memory known as virtual DOM.

When the state change, the virtual DOM get updated not the actual DOM. Updating Virtual DOM is very fast as well as cheap as compared to real DOM. React differentiate Virtual DOM with the snapshot of Virtual DOM before the update and this is done by diffing algorithm and finding out the changes after state update. When rendering the updates to the actual DOM, It doesn't render the entire DOM. There are certain optimization techniques that are used to optimize the rendering which comes under the concept known as reconciliation.

Reconciliation process

Diffing comes under reconciliation. Based on some assumptions DOM is updated.

• Two elements of different types will produce different trees.

#before change
<div>
     <h1>hello</h1>
</div>

#after change
<div>
     <p>hello</p>
</div>

In the above code, React will rebuild the tree inside div from scratch and all component instances in the old tree are destroyed with their current state.

#before change
<div className ="before">
     <h1>hello</h1>
</div>

#after change
<div className ="after" >
     <h1>hello</h1>
</div>

in the above code, we have two elements of the same type but different attributes, here only attribute updated, instance, and state remain the same.

• When we have a list of child elements often changes, we should provide a unique "key" as a prop.

Key provides a unique identity to the elements and helps React to differentiate between them.

<ol>
     <li key ="one">one</li>
     <li key ="two">two</li>
</ol>

Key helps in differentiating elements and keeping a record of changes and updating only those changes instead of rebuilding the whole tree.