React Virtual DOM
ReactJS is a frontend technology used in modern web development. It is a JavaScript library designed to build UIs. It was developed by Meta in 2011. The syntax used in React is JSX or JavaScript XML, which allows the developer to write HTML like code in JavaScript.
Every time we change something on a webpage, everything re renders again. 'Rendering' is the process when React calls all the components to determine how the UI is going to like based on the current data. In a dynamic UI this happens consistently, if you allow the page to render even on a small task you are putting the browser through all of that again and again when a major part of the web page hasn't changed.
What is Virtual DOM?
Virtual DOM in-memory JavaScript representation of the actual DOM. React compares the changes made in the virtual DOM before making updates in actual DOM, so only the modified parts are re-rendered instead of loading the whole page again. This improves the performance of the browser.
React calls the component function, which returns JSX, this JSX is converted into a tree of plain JS objects( virtual DOM) and then this tree is used to create and insert real DOM nodes into the page(only the necessary changes are made). It is a diffing mechanism.
| Real DOM | Virtual DOM |
|---|---|
| The actual structure of the webpage. | A light-weight in-memory representation of the Real DOM. |
| Represents UI. | Optimises performance of the browser by not allowing continuous re-rendering of the entire Real DOM. |
| Directly manipulates on-screen elements. | Does not directly manipulate on-screen signatures. |
| Changes are directly and immediately visible. | Changes are first tested on the virtual copy then uploaded to the real DOM. |
| Actual HTML elements | JS representation |
State or props change triggering re-render
Let us tart with what is state? React state is a built-in object that stores and manages data that changes over time in a component. When a component's state changes using the set function from the useState hook, React re-renders that specific component.
And props are the data passed into a component from their parent. The data strictly flows in one direction, i.e. from parent to child. Also the component that receives the data cannot modify the data. There is a common misconception that changes made in props directly re-renders the UI but actually all React components re-render by default whenever their parent component re-renders.
The key difference between state and prop is that the state is stored and managed by the component itself but props are passed on from outside.
In short, whenever a change is made, it straight up does not go to the browser, instead a new virtual DOM tree is made then the new vs the old trees are compared. Then only the changed nodes are touched- not the whole thing, this is how Real DOM gets updated.
How the Virtual DOM works:
React makes sure the updates happen in batches, it might sound confusing that if we are expecting minimal changes to be made then why batches and not implement the changes in one go? I had the same doubt, but batching in react means to group multiple states into one single render and not multiple changes. This makes rendering less expensive.