paint-brush
Short: The React Virtual DOM by@malloantomarchi
396 reads
396 reads

Short: The React Virtual DOM

by mallo
mallo HackerNoon profile picture

mallo

@malloantomarchi

Dev

November 6th, 2022
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

The Virtual DOM is a virtual representation of the browser DOM that will be kept in memory. If a change is made to an element on the web app, React will update the DOM. Even if websites are faster with React, if many elements need to be updated, it will result that the web apps, even if using React will get slow.
featured image - Short: The React Virtual DOM
1x
Read by Dr. One voice-avatar

Listen to this story

mallo HackerNoon profile picture
mallo

mallo

@malloantomarchi

Dev

Learn More
LEARN MORE ABOUT @MALLOANTOMARCHI'S
EXPERTISE AND PLACE ON THE INTERNET.
0-item

STORY’S CREDIBILITY

DYOR

DYOR

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch


Hello everyone, today, in this short article, let’s talk about an essential concept of React, the Virtual DOM.


The DOM or Document Object Model, is a programming interface for HTML. Thanks to it, and the use of JavaScript (most of the time), we can have access to specific elements of the HTML page, manipulate it, and make the webpages more dynamic.


We can modify, and create elements from the document. The DOM is usually represented as a tree structure of nodes, with each node being an HTML element.


Below is a hierarchical tree representation of the DOM, starting with the root element being HTML, and the other nodes following:


image

But, since we have a DOM, why would we need a virtual DOM, and what are the differences between the standard DOM and the virtual version?


Well the main problem with the traditional DOM, is that it’s really time-consuming, uses a lot of memory, and updates slowly. Having more and more dynamic web apps, it becomes really difficult to modify the DOM and the updates are getting longer.


Here comes React, and the introduction of the Virtual DOM.


The virtual DOM is a virtual representation of the browser DOM that will be kept in memory. Whenever a change is made to an element on the web app, React is going to check if the component‘s HTML in the virtual DOM is the same. If not, the browser DOM will be updated, on the other hand, if it’s the same, the DOM will not be modified. This is typically what we call the process of reconciliation, which we can divide into 4 parts :


  • the virtual DOM is updated whenever an element is modified
  • this virtual DOM is compared to the previous version of the virtual DOM
  • all the changed elements are updated to the browser DOM
  • the web pages are updated according to the browser's DOM


Thanks to the reconciliation, and the way React works behind the scenes, the DOM is only updated when it needs to, and not with any modifications. Websites are faster as a consequence.


But, it’s important to keep in mind, even if websites are faster with React, if many elements need to be updated, it will result in a slow website. So, how can we improve that and keep the benefit of React - which is mainly speed?


The developers behind React have found a great way to deal with this problem, and have created the React Fiber Architecture. The principles of the Fiber Architecture are easy, updates come one after the other, only when needed, and depending on their priority.


For example, if a user is looking at a specific part of a web page, and clicks on a button that displays text on different parts of the page as its result, the updates will be made for the text directly seen by the user, and then will happen for the text that isn’t currently visible. Updates are made over time, step by step, and the web app is optimized.


Thank you for your time, I hope you’ve enjoyed this short article, it was made as a refresher, without going into too much detail.


See you in the next article!




L O A D I N G
. . . comments & more!

About Author

mallo HackerNoon profile picture
mallo@malloantomarchi
Dev

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Learnrepo
Coffee-web
Unni
Coffee-web
Hashnode
Learnrepo
Unni
X REMOVE AD