React Virtual DOM
Understand what is virtual DOM and React Reconcilation.
Whenever user can do any changes in application then basically we are updating the real DOM.
Without DOM Application cannot interact even interact or handle by JavaScript.
Virtual Dom is only specific for React only this develop for speed of the application basically there is a Performance problem in Real Dom the Problem is if user make a very small changes in application then whole layout still Render on the Real DOM.
For example any changes like h1 element so whole page Re-render we can say Refresh the entire page.
Which is very time consuming that time consumption will increase the load time of web page and that is the speed and time Related problem to solve this problem we have virtual Dom.
In React Application if some website user open a React based website in there browser then in the background React library make an Exact copy of the DOM and show the copy to the user so the copy of DOM we called virtual DOM.
when the user can do some interaction manipulation in virtual DOM at looks like user interact with real DOM but actually user interact and making the changes on virtual DOM.
If user change something on website so virtual DOM not render all things for the small - small changes. Only the small specific part of virtual Dom updated. Then in the background React algorithms only of the React library will keep comparing virtual DOM Or Real DOM and whatever changes that user have made here in the virtual DOM only those changes can be updated in real DOM by those algorithms
And this update process virtual DOM to Real DOM is Called Reconciliation which is done by react libraries.
Earlier we are directly update the real DOM is one step process but in React we change virtual DOM and changes Real DOM is 2 step process but rather then Re-rendering the whole DOM directly we know updating only the changes in virtual DOM and same in the real DOM.
This minimum rendering of DOM makes web page very fast to load in the UI.
Conclusion: - React uses a virtual DOM to efficiently update the UI without re-rendering the entire page, which helps improve performance and make the application more responsive.
