I’ve started looking at React again, and one of the concepts that was new to me was the virtual DOM. React isn’t the only JavaScript framework to make use of a virtual DOM though.

The idea is pretty neat: JS can make changes directly to the DOM, but that can be pretty slow, instead the framework makes changes to a virtual copy of that DOM! The virtual DOM is a lightweight copy of the real DOM, and when the virtual DOM is changed it’s compared to a slightly earlier version, and any differences between the two are passed to the DOM. That means that the entire DOM doesn’t need to be re-rendered with each change, only the elements that are modified.

Read a good article about the virtual DOM from React Kung Fu here. There’s another good article from Codecademy here. And there’s a short page about it from the official React site here!