How React DOM actually works

Problem

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.

Solution

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: