TLDR Web Dev · ARTICLES & TUTORIALS

A VIRTUAL DOM IN 200 LINES OF JAVASCRIPT

lazamar.github.io18 min read

Summary from the TLDR Web Dev newsletter

A virtual DOM makes UI modification easier by tracking changes in a simplified representation of the DOM. A library tracks changes to the root DOM element by keeping a structure of virtual nodes, representing each HTML element. When the state changes, the library creates a new virtual DOM, compares it to the previous one (diffing), and applies the differences to the real DOM, making sure it matches the desired state.