React attempts to simplify construction and maintenance of user interfaces by breaking down areas of a view into progressively smaller building blocks, called components, where logic, state and style is self-contained and easier to understand for the developer. These components are then stacked together to create what users see on the screen.
Each of these building blocks can manage their own state; for example, the current content it contains, if the component or some part of it should be visible, etc. Not only can a component control it’s own state, it can also draw on and influence the same global state that other components might also be using. So if a user say, adds a product to a cart by clicking Add to Cart under a product, the cart’s state is modified to include the product, and React will notify the cart and re-render just the components that need to know about this — all without needing to reload the page.
Prior to this method, other libraries provided the ability to manipulate the Document Object Model (DOM) that the browser creates and renders in the browsers. Libraries such as jQuery created a simple syntax to listen to user actions, and make changes to the DOM. However, as things started to get more complex, jQuery could become slow and cumbersome, and increasingly hard to keep track of what code was acting on what, and when.
React uses the concept of a Shadow DOM, a virtual copy of the current DOM state of the browser held in memory, and when it detects an update, calculates what would need to change, compares the changes to the current DOM, and only makes these changes to reflect the current state. This gives the page a zippy, App-like feel.
Under the hood there are many more well thought out efficiencies provided by the React library for performance, which makes developers, clients and users happy. All of this results in cutting-edge, performant and maintainable websites.