ReactT2 Dark_1200x303

In this article, we’ll cover the evolution of React.js from its inception through the release of different versions to date, including what’s expected in React 18.

Before JavaScript’s libraries and frameworks became popular, web developers had to do things manually (add watchers for every DOM element and bind them with the help of JavaScript or jQuery). When state data changes or updates, these watchers reload the entire DOM and update it. Then browsers had to recalculate the positions of everything. It was adequate for building non-interactive applications.

However, in web applications with thousands of interactions happening simultaneously, manipulating the DOM was expensive because there were a lot of watchers triggering updates simultaneously. Browsers also had much recalculating and printing lined up, which led to layout thrashing and slowed down the application’s load time and performance.

In this post, we will be focused on how the introduction and evolution of React.js over time solves these problems and provides frontend developers with the ability and simplicity to build user-friendly interfaces.

What Is React?

React is an open-source frontend JavaScript library for building fast and interactive user interfaces. It follows the component-based approach and is used for handling the view layer for web and mobile applications.

React also has two main characteristics that make it an amazing library, and the first is the virtual DOM. Internally, React creates a virtual DOM (one of React’s claims to fame) representing a UI stored in memory and compares it with a virtual DOM snapshot taken when an event happens (user clicks a button). Using a process known as diffing, React determines which virtual DOM objects have changed and what parts of the actual DOM need to change by comparing the current virtual DOM with a previous version (the virtual DOM snapshot). The current virtual DOM is then used to compare and update the browser’s displayed DOM (the “real” DOM).

The fact that the comparison happens on the virtual DOM and not the real DOM is a great abstraction that makes React very fast because browsers do not have to repaint DOM objects when there are no requirements to update.

Another fantastic feature of React is the ability to write JSX in React. JSX (JavaScript Syntax Extension) is a nice way to write plain JavaScript objects describing the React elements that make up your application. It is an XML-like extension that allows us to write JavaScript that looks like markup and return it from a component. JSX combines the beauty of HTML and the power of JavaScript. For more about what happens behind the scenes when you write JSX in React, check out this post.

The Conception of React

It started with a problem. In summary, the issue began in 2011 when the developers at Facebook started experiencing different issues with code maintenance while working on the Facebook Ads app. More features were added as it grew, and the team needed additional hands to continue developing it.

Things became complex at some point due to what they termed “cascading updates,” as it became challenging to maintain the codebase or even to tell what changes were causing the cascading updates. This significantly slowed them down as a business. They needed a way to solve their problems with user experience and how bad it was for performance.

Before then, engineers at Facebook had developed XHP—their own version of PHP—and released it as open-source software in 2010. XHP allowed the creation of composite components. It was used to make frontend development easier, and its XXS protection also helped prevent cross-site scripting (XSS).

Unfortunately, XHP had issues, mainly when building dynamic web applications, resulting in poor user experience and performance. It caused the entire web application to rerender itself whenever a change in state occured, which ultimately led to the loss of any user information previously saved in the DOM.

In 2011, Jordan Walke, who was an engineer at Facebook, created FaxJS in an attempt to come up with a prototype that would solve the problem they were having at the time. The team loved working with it, and it turned out to be the early prototype of React. After a few months, the team at Facebook built the like and comment features with a version that was entirely powered by React and Flux.

Facebook purchased Instagram in 2012. They had many products they wanted to work on, but Instagram’s website was top of the list. They looked at Facebook’s stack and decided to adopt Facebook’s new technology (React) to build Instagram’s website. This was an issue since React was tightly integrated with Facebook’s software stack. Pete Hunt convinced them at the time that separating React from Facebook would be beneficial, and he did most of the work required to decouple it, resulting in React becoming open-source software.

The Grand Debut

At the 2013 JSConf, Jordan Walke announced React as an open-source project. In his words, “One of the things we strived for when we were building our component framework is that we want to minimize the number of developers facing mutations that the developers are exposed to.” The initial impressions were pretty skeptical. People thought that React represented a significant step backward in terms of code maintainability because HTML was embedded in JavaScript.

Early in 2014, as developers started adopting React, the creators of React planned tours and conferences to build the community, win people’s minds and help them realize that React is for innovators. Meanwhile, React Developer Tools also became an extension of the Chrome Developer Tools. That same year, React Hot Loader, a plugin that allows React components to be live reloaded without the loss of state, was released.

During a technical talk at the React.js Conference in January 2015, Facebook announced the first version of React Native, enabling easy development with Android and iOS development.

In addition, React v0.13 was released in March 2015, and the most notable new feature was support for ES6 classes, which allow developers to have more flexibility when writing components. Dan Abramov and Andrew Clark released Redux, and the first stable version of React Developer Tools was also launched.

React v0.14 was released in October 2015, and some significant changes came with this release. The main react package was split into react and react-dom, which made writing components shared between the web version of React and React Native possible. Also, refs were exposed to DOM components as the DOM node itself.

By this time, React also started to gain widespread acceptance and was being used by some of the world’s most important businesses, like Netflix and Airbnb.

In April 2016, React switched from version 0.14.7 to a major stable version—React v15.0—demonstrating a commitment to stability as well as the ability to introduce new backward-compatible features in minor releases and the continued progress of React moving forward. Some of the significant changes in the release improved how we interact with the DOM:

  • Using document.createElement when mounting components instead of setting innerHTML. They considered this faster in modern browsers, and it fixed some edge cases as well.
  • Functional components could now return null.
  • Improved support for SVG. Support was added for all the SVG attributes that are recognized by today’s browsers.

React v16.0 was released in September 2017, and it included several changes and new features, some of which include:

  • Improved error handling with the introduction of Error Boundaries, which are special React components that provide a clean way to handle errors in their child components, log those errors and show a fallback UI in their place.
  • Allowing you to return multiple elements from a component’s render method, such as arrays and strings.
  • Improved server-side rendering, which was said to be roughly three times faster than React 15.

React v17.0 was released in October 2020, after two and half years since the previous major release. This release was mainly focused on making it simpler to update React itself from previous versions because it did not include any new developer-facing features. Before this release, upgrading from an earlier version of React to a new one required upgrading your whole app all at once. With React 17 came the option to upgrade your entire app at once or upgrade your app piece by piece as you see fit.

What’s Coming?

The React Team shared a few updates on their official blog in June 2021 about their intentions for React 18, which is expected to be their next major version. According to them, the updates in React 18 are primarily aimed at maintainers of third-party libraries. They also released React 18 Alpha so that library authors can try it and provide feedback.

Additionally, they created a working group comprised of a panel of experts, developers, library authors and educators from across the React community to participate, provide feedback, ask questions and collaborate on the release to prepare the community for the gradual adoption of these new features. However, the discussion in the working group is available for the public to read if you’re interested.

Conclusion

From the beginning of React’s development, the library has shown a steady increase in growth through the release of different versions. React aims at making life as simple as possible for the companies and developers that use it. You can find information about all the different versions of React releases here. For more information on upgrading to React 18 or additional resources about the release, visit the React documentation.


Ifeoma-Imoh
About the Author

Ifeoma Imoh

Ifeoma Imoh is a software developer and technical writer who is in love with all things JavaScript. Find her on Twitter or YouTube.

Related Posts

Comments

Comments are disabled in preview mode.