React is an open-source library for building dynamic user interfaces, first released in 2013. Over the years, it has become very popular among developers as the leading tool for building UIs. Many big companies use React for their products - Facebook, Airbnb, Instagram, Twitter, Netflix, Atlassian, Reddit, PayPal and more. According to a survey from 2021.stateofjs.com, this next graph shows the ranking of front-end frameworks and libraries over the years, with the ratio defined as (would use again + would not use again) / total. We can see that React has been on the very top, and similar results are shown on other parameters.

source https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/

This graph from www.npmtrends.com shows npm package downloads over the years, where we can see growing results for React:

In these next couple of sections, we explore some of React’s innovations to understand its growth in popularity.

Reactive updates

The way React handles updates to the DOM is definitely one of its best contributions. The DOM (Document Object Model) is the representation of the HTML document, and its manipulation is slow, which is why it’s best to avoid inefficient and unnecessary updates to it.

React uses the virtual DOM, a representation of the DOM object, to compare and figure out which objects have changed, and then updates only the necessary parts. We are not updating the whole DOM, so we have better performance. This approach offers a level of abstraction that simplifies the development process, as described in their docs:

This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. (source)

Functional components

Components are small, reusable pieces that represent some part of the UI. They contain the logic required to display something, like a button or a navbar. They are usually written using JSX - JavaScript’s extension syntax, that contains HTML and embedded JavaScript objects.

In 2019, a new version 16.8 contained the addition of hooks, which enabled us to write only functional components in our entire app instead of class-based ones. Functional components are simply JavaScript functions that accept props and return a React element. They enabled developers to reduce the amount of code compared to writing class components. Here is an example between a class component and an equivalent functional component:

image - comparison between class and function components

One-way data flow

In a React app, data flows in only one direction - from the parent component to its children, also called unidirectional data flow. This read-only data passed from parents to children is called props. Unlike two-way data binding, where data flows in both directions, with this approach there is better control over your components - changes you make to a component’s state can only affect that component or its children, but not its parent or sibling components. Because we know data only flows in one direction, it is easier to debug components. If you want to share the same data between components you need to lift the state up in the component tree, to the closest common ancestor. 

A final word

These are the bigger innovations React has brought to us, but it doesn’t mean that’s all it offers. The official documentation page is detailed and full of examples and there are a lot of online resources for learning and getting help. React’s simplicity and straightforward design means the learning curve is less steep than some other frameworks. It’s very flexible - you can choose what tools you want to use to handle certain tasks like testing or routing, and you can use it for mobile app development with React Native and even VR with React VR. There’s also the very popular Nextjs - a framework enabling React based web apps additional tools like static site generation, server-side rendering, automatic image optimization, code-splitting, etc. 

We at Cinnamon agency have been using React and Nextjs for web development and it has been a great experience, and we hope it stays that way for a while.