# Understanding React Virtual DOM

**THE REAL DOM**

The Real DOM is a representative of your HTML structure. The HTML we know is static and doesn't have the ability to change.

The DOM API is provided by the browserjum to allow for the manipulation of your HTML structure. The JS DOM API , will traverse through the DOM tree to retrieve any information and change it.

**HOW DOES THE DOM API WORK.**

1. Querying the DOM
2. DOM update
3. DOM Rerendering.

**THE PROBLEM**
This method Of updating the DOM is costly, reduces performance and it might be slow, because the API will neeed to traverse through the whole DOM tree. The more nested it is, the more the problem.

**THE REACT VIRTUAL DOM**
It is a lightweight exact copy of the real DOM, that allows react to manage changes more efficiently while minimizing direct manipulation required on the real DOM. It is an in memory object representation of the real DOM tree.

**HOW DOES THE VIRTUAL DOM WORK?**

When you build your components structure, write your JSX, a structure is already created, because it is nothing but your normal HTML. Now React copies this DOM tree and creates a virtual DOM (in memory).

Anytime there is a change, react copies the initial virtual DOM and creates a new virtual DOM with the new changes. This method of comparing the change between the initial virtual DOM to identify what changes have been made and update in the new one is called **DIFFING ALGORITHM**.

These new changes will be applied to the real DOM. No need of tranversing the whole tree to do this. Only the needed part will be updated.

The method of updating the real DOM with the changes from the virtual DOM is known as **RECONCILIATION**. Reconciling the virtual DOM with the real DOM.

**WHY VIRTUAL DOM IF REACT CREATES A NEW ONE ANYTIME THERE IS AN UPDATE AND PUSHES IT TO THE REAL DOM ?**

The real DOM is not updated every time a new virtual DOM is created. React batches these changes and chooses the right time to reconcile with the real DOM. The BATCH UPDATE is determined by React.

**THE DIFFERENCE??**
This virtual DOM is not updated every time you make a change to an element.

**ADVANTAGES OF THE VIRTUAL DOM**

**High Performance:** No traversal through the whole DOM tree, only the needed changes are made

**Speed:** The updating of the real DOM is batched , no need for continuous process and only happens at a particular frequency.

**SOME IMPORTANT THINGS TO NOTE**

**Root element change:** When the root element changes, the DOM tree is destroyed and rebuilt because it is assumed that everything changed.

**Attribute change:** When an attribute changes only that particular change will be updated in the virtual DOM.

**Lists change:** When a change is made in a list, React traverses through the whole list and compares them one by one and effects the change. This is costly and takes time, even though you won't notice. The longer the list, the heavier the process. To sort this, React makes use of keys.

Each list item is given a unique key for identification. So anytime a change is made, React uses the key to identify which one changed and updates it

**CONCLUSION**

The React Virtual DOM is an abstraction of the real DOM that React uses to handle and manage states. This goes a long way to contribute to the declarative nature of React ( tell it what to do, it will handle the rest), leading to fast and smooth updates.