React is a declarative, efficient and flexible JavaScript library for building user interfaces. It allows you to take individual code in isolation and compose them together to build complex UI.
Facebook introduced React in 2013. Back then, complex web applications were struggling to control changes within the HTML DOM. It was hard to predict what was going to be rendered to the screen and race conditions updating the HTML was the most common bug.
Facebook and the React team set to fix this problem with two main innovations:
These fundamentally changed how JavaScript frameworks worked and controlled the mutation problem by providing deterministic view renders.
In order to build complex & robust yet predictable applications it is important to known when and how state change. React was able to isolate the rendering of an HTML view from the model and introduced a new architecture called “Flux” to the JavaScript ecosystem.
Previous to React, frontend developers were defining event listeners which were responsible for updating the state of a web application. As the application grows, event handlers take on more updates making hard to predict what get’s render in the HTML.
Instead of attaching event listeners to objects to then trigger updates to the HTML DOM, React provides a single way to manipulate a component state: send dispatch to a store. When the store changes, it then ask the component to render.
The state of a component can not change once set. Changes to the states won't change an existing view. Instead, these changes will trigger a new view render with a new state.
This allows to think of UI as a function of the application state:
UI = fn(state)The main benefit of immutability is that it helps developers build pure components. With Immutable component states, React can easily determine if changes have been made and request re-rendering.
