How React DOM actually works


There are lots of resources on internet, some of them are good but I couldn’t find anyone which show how react DOM works by debugging it and show data and html are linked.


We’ll see how React Dom actually works, we will see by debugging how the html gets updated, we’ll see how react DOM works using picture demonstration as well.

Suppose we a list of 5 ToDo items, now react DOM knows via its virtual DOM that there in an array of 5 ToDo objects, now if we add a new ToDo item in the list, which means we have updated the state of the application, then the react runs an algorithm called the “diffing algorithm” which compares the update react virtual DOM(which has the updated data now) with the previous virtual DOM or data, the comparison is done block-by-block.

See the graphical representation below:


Then the block which appears to be different are found the corresponding html node is added at exactly the same point without changing anything else in the html tree.

Another example, suppose, we have to mark a 4th ToDoitem(evening snack in the picture above) as Done, which means we are updating the data of the ToDo object like this.

Previous data – { IsDone: false}

Updated data – {IsDone: true}

If this will happen in the data then it means the React virtual DOM is updated for that ToDoitem, now again the diffing algorithm will run, and it will find that a ToDo item with id= “itemId4” is updated. Now it will go the html node of that ToDoitem with id= “itemId4” and will make the change in the html accordingly.

So precisely, first the data (react virtual DOM) is updated then the html gets updated.

To see it actually happing, watch this below video:

More from Node/Javascript:

Natalie Harris
With references from Alan Plang
Kyle Aniston
With references from Alan Plang
Kyle Aniston
With references from StackOverflow
Mike Morgan
With references from StackOverflow
Mike Morgan
Forwared by QwertyBot
Mike Morgan
Forwared by QwertyBot
Kyle Aniston
Forwared by Alan Plang

One thought on “How React DOM actually works

  1. Pingback: Snooper

Leave a Reply

Your email address will not be published. Required fields are marked *