React and the virtual DOM

Eric Njanga Apr 08, 2018

The virtual DOM is a programming technique that keeps a “virtual” representation of the UI in memory and synchronizes it with the “real” DOM using specific libraries (ReactDOM in this case).

The synchronization of the “virtual” and “real” DOM happens by a process called “reconciliation” where both versions are compared and only the parts of the “real” DOM that differ will be replaced.

The reconciliation process allows React to have a declarative API: The developer just has to declare which state he wants the UI to be in and react will take care of matching that state (JSX makes writing that declaration easier).

This abstracts the following:

  • Dom manipulation
  • Attribute manipulation
  • Event handling

Notes

It is important to note that the virtual DOM is not a technology. It is a programming paradigm, a concept, a pattern used by many frameworks and libraries, not just React.

The virtual DOM pattern is reputed to be one of the most effective (if not the most) way of handling UI updates.

 

© 2018 Copyright Eric Njanga | |