DOM (Document Object Model)

DOM is a programming interface made from a structured document like HTML for programming languages to be able change the content, structure and style of the document.

Most JavaScript frameworks update the DOM much more than they have to. For example there is a todo list with 10 tasks and one task has to be checked off. The JS frameworks with rebuild all the 10 tasks. This is fine for this small task. But with todays web interactions there has to be a more efficient way to solve this problem.

This is where Virtual DOM comes to play where a copy of the DOM is taken and every DOM object has a corresponding Virtual DOM object. Now, manipulating the Virtual DOM is fast as it is a blueprint.

When a JSX element is rendered every single Virtual DOM object is rendered again and it is compared with a Virtual DOM snapshot. This snapshot is the previous version of the Virtual DOM.

Now by this comparison React find out which object have been modified. React will update only those object which have been modified and no other objects.

This is where React’s performance improvement comes to play and make DOM updates faster.