How React uses a virtual DOM to be more responsive

I glossed over why the render method is used, so now is the time to address React's secret weapon, that is, the virtual Document Object Model (DOM). If you've been developing web applications for a while, you are probably aware of the DOM.  If you have never encountered this, the DOM is an entity that describes exactly what a web page will look like. Web browsers rely very heavily on the DOM, and, as it has grown organically over the years, it can be pretty unwieldy. There is only so much that browser manufacturers can do to try and speed up the DOM. If they want to be able to serve up old web pages, then they have to support the full DOM. 

The virtual DOM is a light weight copy of the standard DOM. The reason it is lighter in weight is that it misses out a major feature of the standard DOM; that is, it doesn't have to render out to the screen. When React runs the render method, it traverses each .tsx (or .jsx in JavaScript) file and executes the rendering code there. It then compares this rendered code to a copy of the last render that was run to work out exactly what has changed. Only those changed elements are updated on the screen. This comparison stage is the reason we have to use a virtual DOM. It's much faster to tell what elements need updating using this approach, and only those elements that get changed need to be updated.