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.
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.
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.
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.
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:
React v16.0 was released in September 2017, and it included several changes and new features, some of which include:
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.
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.
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.
Subscribe to be the first to get our expert-written articles and tutorials for developers!