Why do we need a UI Library?

Two of the most important ideas of reactive programming are that systems should be event-driven and responsive to state changes.

The DOM’s user interface components have internal state, and updating the browser isn’t as simple as just regenerating the DOM whenever something changes. If Gmail did this, for example, you would be constantly annoyed when the entire browser window refreshed in order to display a new message, wiping out the email you were composing.

The statefulness of the DOM is why we need user interface libraries and solutions such as key/value observation (which is used by Ember among others) or dirty checking (which is used by Angular). UI libraries handle watching for changes to the data model and updating the correct part of the DOM when these changes occur, or watching for changes in the DOM and updating the data model when they occur.

This type of watching and updating is called two-way binding, and it can often make working with user interfaces very complex and confusing. What makes React different?

What makes React and its Virtual DOM so different

is that it’s simpler than other approaches to making JavaScript reactive from a programmer’s perspective. You write pure JavaScript that updates React components, and React updates the DOM for you. The data binding isn’t intertwined with the application.

React uses one-way data binding to make things simpler. Every time you type in an input field in a React UI, for example, it doesn’t directly change the state of that component. Instead, it updates the data model, which causes the UI to be updated and the text you typed into the field appears in the field.