Virtual DOM — the magic behind React

Abhishek
1 min readJan 13, 2022

--

We have moved from Static UI to dynamic UI’s where we interact with the page, submit the forms, click on items to get more details and perform all sort of crazy stuff. It’s interactive, we do something and screen changes its state in respond to it.

React makes our application fast with the use of something called Virtual DOM.

Consider this example of code:

react code with add button and counter on screen

If you observe line 12, you will notice we are clicking button and calling the function addOne.

When addOne is called, it re-renders the UI by calling line 5 function, now you would think how in-efficient it is to call the whole UI to just display the updated count value.

This is where Virtual DOM comes in action, whenever re-rendering of same piece of code happens, the react Virtual DOM algorithm smartly calculates the difference and returns only what has changed and thereby saving us to load the whole UI/DOM elements again.

References —
Official — https://reactjs.org/docs/faq-internals.html
Andrew course from Udemy.

This is my Day 6 of learning/100 and I will see you in next chapter!

--

--