React?

React is a library used to create user interfaces declaratively. Learn about React components, they are descriptions of what UIs should look like, and React itself builds and maintains the user interface.

What is DOM ?

DOM stands for Document Object Model.

  • Events for HTML elements
  • Properties for HTML elements
  • Methods for HTML elements

What makes DOM manipulation slow?

The DOM is represented as a tree data structure. Because of that, the changes and updates to the DOM are fast. But after the change, the updated element and it’s children have to be re-rendered to update the application UI. The re-rendering or re-painting of the UI is what makes it slow. Therefore, the more UI components you have, the more expensive the DOM updates could be, since they would need to be re-rendered for every DOM update.

How does React use Virtual DOM

Now that you have a fair understanding of what a Virtual DOM is, and how it can help with performance of your app, lets look into how React leverages the virtual DOM.

Javascript Developer