React.js and the virtual DOM vs real DOM Flashcards
What is the real DOM?
DOM stands for “Document Object Model”. The DOM in simple words represents the UI of your application.
What’s the problem with frequently manipulating the real DOM?
It affects performance by slowing down the browser.
What makes DOM manipulation slow?
The DOM is represented as a tree data structure. Because of that, the changes and updates to the DOM are fast. But after the change, the updated element and its children have to be re-rendered to update the application UI.
The re-rendering or re-painting of the UI is what makes it slow.
Therefore, the more UI components you have, the more expensive the DOM updates could be, since they would need to be re-rendered for every DOM update.
What is a virtual DOM?
The virtual DOM is only a virtual representation of the DOM. Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.
Why is the virtual DOM faster and more efficient?
When new elements are added to the UI, a virtual DOM, which is represented as a tree is created. Each element is a node on this tree. If the state of any of these elements changes, a new virtual DOM tree is created. This tree is then compared or “diffed” with the previous virtual DOM tree.
Once this is done, the virtual DOM calculates the best possible method to make these changes to the real DOM. This ensures that there are minimal operations on the real DOM.
Hence, reducing the performance cost of updating the real DOM.
The image below shows the virtual DOM tree and the diffing process.
In React every UI piece is a component, and each component has a state. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM. What is this process called?
. This process is called “diffing”.
In simple words, you tell React what state you want the UI to be in, and it makes sure that the DOM matches that state. What is the great benefit to a developer here?
The benefit is that you would not need to know how the attribute manipulation, event handling or the manual DOM updates happen behind the scenes.
All of these details are abstracted away from React developers. All you need to do is update the states of your component as and when needed and React takes care of the rest. This ensures a superior developer experience when using React.
render() is where the UI gets updated and rendered. render() is the required ________ _______ in React.
Lifecycle Method
The render() function is the point of entry where the tree of React elements is created. When a state or prop within the component is updated, what happens next?
The render() will return a different tree of React elements. If you use setState() within the component, React immediately detects the state change and re-renders the component.
React then figures out how to efficiently update the UI to match the most recent tree changes.
This is when React updates its virtual DOM first and updates only the object that has changed in the real DOM.
What is a batch update mechanism?
This means that updates to the real DOM are sent in batches, instead of sending updates for every single change in state. This is what leads to increased performance.
The repainting of the UI is the most expensive part, and React efficiently ensures that the real DOM receives only batched updates to repaint the UI.
What is a recap of real DOM, virtual DOM, and what they do as a team makes react more efficient?
- Frequent DOM manipulations are expensive and performance heavy.
- Virtual DOM is a virtual representation of the real DOM.
- When state changes occur, the virtual DOM is updated and the previous and current version of virtual DOM is compared. This is called “diffing”.
- The virtual DOM then sends a batch update to the real DOM to update the UI.
- React uses virtual DOM to enhance its performance.
- It uses the observable to detect state and prop changes.
- React uses an efficient diff algorithm to compare the versions of virtual DOM.
- It then makes sure that batched updates are sent to the real DOM for repainting or re-rendering of the UI.
