Reconciliation Algorithm
What this algorithm do is, its update the React DOM (Document Object Model). So, the process through the updating React DOM is called Reconciliation Algorithm.
Before getting into the how reconciliation algorithm works, we need to know what DOM and Virtual DOM is,
The Document Object Model (DOM) is containing and comprise the structure and all the contents of a web page. In DOM, when browser receive a HTML file browser pass it through a render engine and makes a DOM tree. In DOM tree all HTML’s elements reserved as nodes. Same things happen with CSS which was came with HTML file. It goes through same process. It makes a style object model. These all together makes a Render Tree.
These Render Tree must pass through a layout phase. What happens in layout phase is, here all Render Tree’s coordinate counts and attach to the elements so as if he could understand where on the screen it would be printed. After this operation its finally print the page so we could see the page. This is the DOM process. When, we change something in HTML or CSS file the browser goes through same process as per we change. This whole process takes time. This whole process makes the page load slow.
But in Virtual DOM, it doesn’t go through whole process of the DOM and doesn’t reload the whole web page. Its just update the state where its change and reload it without reloading other states. Let’s assume the DOM is a tree where every node is a component. When we changed some data, it creates a new tree, where it’s all component create again. So, now it has two different states of the tree. Now its compare both and now here, its deicide which position has been changed by using Reconciliation Algorithm.
Reconciliation Algorithm make decision in efficient way. After taking the decision, React change the particular position of the component. This is the main beauty of React Virtual DOM.
So. These Reconciliation Algorithm simple but it makes the whole process easy for React. It makes the DOM process more efficient and easier.
