Skip to main content

Virtual DOM

A JavaScript alternative representation of the real DOM.

  • React uses a virtual DOM (Document Object Model) to optimize updates and rendering.
  • The virtual DOM is a lightweight in-memory representation of the actual DOM.
  • When the state of a component changes, React compares the virtual DOM with the actual DOM and only makes changes to the actual DOM where necessary, which is much more efficient than rerendering the entire page.

Now, what are the steps involved when there is a new change in your UI?

  1. First, React will take all your JSX and produce a new UI representation as a tree of elements.
  2. Second, it will compare it with the previous representation that is kept in memory.
  3. Third, it will calculate the difference in a tree, recall that since each node in the tree is a JavaScript object, this diffing operation is very fast.
  4. And finally based on that difference, it will apply the minimum number of changes to the underlying dom nodes in order to process the update, and that's it.

Virtual DOM

How does React.js handle updates and rendering?

  • When a component's state changes, React will re-render that component and its child components to reflect the new state.
  • React uses a virtual DOM to optimize updates by only re-rendering the specific parts of the actual DOM that have changed.
  • This helps to improve the performance of the application.