React is a popular library for creating user interfaces (UIs). Since its public release in mid 2013 it continues to gain traction and foster innovation without any sign of slowing down yet. React’s uptake in the mobile sphere via React Native is but one example. In this article, we explore React’s unique suitability for creating UIs by providing a list of specific reasons.
The UI is described at any given point in time
Traditional approaches to writing UI code allow the describing of the initial state of the UI. Further UI state transitions, however, must be accomplished with references to UI elements and piece-wise mutations. This is very error-prone as edge cases are easily missed, thereby introducing inconsistency and bugs. The following screenshot is an example from Medium:
Understanding this error potential, many frameworks employ (two-way) data-binding to solve inconsistency problems and to increase convenience. From personal experience, traditional data-binding becomes unwieldy for more complicated cases and does not help if parts of the UI tree need to be replaced (in a dynamic manner).
Instead of trying to patch over the problems of UI state transitions, React describes the UI at any given point in time. You, as a programmer, describe the state of the UI as the single source of truth and the UI itself is derived from that. Put differently, you do not have to manually take care of UI state transitions anymore which considerably reduces error-proneness. The UI code becomes declarative and there is no—or at least much less—chance of local state and variables becoming out of sync with the UI. Using references to UI elements is an extremely special case and not the norm. See the following links that make a similar point:
Many modern frameworks have adopted this approach due to its superiority for the majority of use cases. In order to benefit from this even more, the framework must provide a usable way of accomplishing (inter-component) change propagation. This is a topic for another article.
Host language reuse for view notation
- A DOMain of Shadows by Gilad Bracha
Cohesion inside components
This point is very much related to React’s host language reuse. In other frameworks, a component’s view tree description resides in its own file, separate from the rest of the component. This is separation for the sake of separation, motivated by dubious concerns. React counters this by embracing cohesion inside components. The advantages include less cognitive overhead, less context switches, and easier navigation.
Frictionless component creation and composition
There is little ceremony involved in creating a component, and it is easy to compose components and to create higher-order ones. You are more likely to create reusable (higher-order) components than feeling the need to copy and paste code. It is my claim that this leads to better and more plentiful third-party libraries as well.
Little conceptual overhead
React is not a comprehensive framework. Instead, React describes itself as a View library and does not really concern itself with how the rest of the application is structured. React is conceptually simple. This leads to a shallower learning curve and more flexibility when it comes to the application structure. On the other hand, the resulting agony of choice can also be seen as a disadvantage.
Backing by Facebook and ecosystem
The backing of a project by a large organization is not a guarantee for widespread success—there are many counter examples that illustrate this point. Famous ones include Google’s Wave, Buzz or GWT. However, React is used heavily inside Facebook and it seems that a fair amount of resources are invested into React by Facebook. Not only that, but the arguably huge community and tooling around React makes a healthy impression. This leads to trust in the future of React.
React is based on valuable principles which makes it more than a fashionable trend. It is not so much any single feature anymore that sets React apart—it is the overall philosophy and the resulting mindset, community, and ecosystem.
- Why React from React’s official documentation
- Thinking in React from React’s official documentation
- Pure UI by Guillermo Rauch
- Removing User Interface Complexity, or Why React is Awesome by James Long
- What is React? by Andrew H. Farmer
- Many of the initial video presentations about React from React’s official documentation
- Why React Really is Different (Video) by Jake Ginnivan
Thanks to Natali Vlatko for proof-reading!