What React Is and Why It Matters

Chapter 3. React’s Primary Innovations

React’s outward messaging—and in particular, its website—is mainly aimed at developers. Its home page is full of code samples, and it explains the library in terms of its component model and its declarative syntax. In terms of React’s contributions to the JavaScript community, these things have been transformative, but ultimately both are superficial. React is very different from the libraries and frameworks that came before it, and it provides three primary innovations that, when taken together, account for why people are so enamored with it: the virtual DOM, functional patterns, and one-way data.

Virtual DOM

Rather than make changes directly to a part of a UI, applications written with React send updates to a rendering engine to make changes on their behalf.

The operation of React’s rendering engine is divided into three steps. When it receives a request to change the UI, it first determines what the new UI will look like. It then calculates the difference between the new UI and the present state. This process of diffing, or reconciliation, is made possible because React keeps a small, intermediate representation of the fully rendered app, called a virtual DOM, in memory. Finally, React estimates, from this diff, the most minimal and performant set of updates to make to the UI.

To explain how this works and why it’s important, here is a quick refresher on the way web applications work. Everything on the web, from Wikipedia to YouTube, ...