7 January, 2021
React remains one of the most popular frontend technologies thanks to its simplicity and flexibility achieved through long-established development choices. In the latest version, the React team decided against changing them that much. Aside from a couple minor improvements, it remains the same. Except for one big change, which has the potential to greatly accelerate the growth of React and the adoption of its new features in the long run.
Did you know that React is already 7 years old? Time sure flies fast. During this time, React has become one of the most ubiquitous web technologies. In fact, according to the latest Stack Overflow 2020 survey, React is the most in-use frontend framework among developers (only behind the jQuery library, but ahead of all full-fledged frameworks).
Such popularity is usually attributed to the features that made React stand out from the crowd – its powerful data binding, component-based nature of the virtual Document Object Model. They all have been the essence of React-based programming since the beginning.
It doesn’t mean that devs are looking forward to some new React features. However, in React 17, the developers behind the framework decided to keep things as they are. First of all, let’s explain why the React team proudly announced that React 17 has “no new features”.
No new features? What is up with React 17?
The React team is well aware of the fact that many developers would like to see some new React features. But they are also aware of how difficult it might sometimes be to fully upgrade an existing web application to a new version. For many stakeholders, it is often an “all-or-nothing” situation – you either upgrade or stay with the older version. The creators finally admitted that they reached the limits of an approach in which they can support legacy APIs and other features indefinitely.
In order to break out of that cycle and make it possible to introduce more new long-awaited React features in the future (such as React Suspense, server components or the concurrent mode) React 17 introduced a highly refined gradual upgrade process
How does it work?
The gradual upgrade made (much easier)
Technically, it has always been possible to use different versions of React at the same time by embedding a React tree handled by one version into a React tree managed by another version. The problem was that all React versions on the same page registered event handles at the top of the DOM through the event delegation process. It means that when you stop the propagation of an event in a nested tree, the outer tree will still receive it.
In React 17, the event handles will now be attached to the root DOM container rather than at the document level.
Instead of calling…
React will now call:
However, for this to work, all React versions used on the page need to be at least version 17. You might then think about React 17 as a stepping stone release that will make it much easier to introduce new React features or even embed React in other technologies in the future.
What else is new in React 17?
As modest as the release seems at first glance, other than the new gradual upgrade process, it also introduces some important improvements:
- The useEffect cleanup function will now always run asynchronously. Back in React 16, it runs synchronously during component unmounting, which slows down large screen transitions. (learn more about the useEffect hook).
- The event pooling mechanism, which involves cleaning an object from all data after an event is fired and sending it back to the pool for later use, will now be deprecated
- A couple of small changes were introduced for the purpose of better aligning the behavior of React with that of the browser. Among others, the onFocus and onBlur events will now use the native focusin and focusout events under the hood.
- Removal of private exports – internals of the event system used by some projects, especially React Native for Web. The dependency was prone to breaking and the React Native for Web team is not going to use it anymore either.
React latest version – summary
And that’s it for a React latest version that marks the first major release in well over two years. Doesn’t seem like much?
It might be so, but the new gradual upgrade mechanism is a sure sign of things to come in the future. With this out of the way, the React team can now move to making developers happy with new React features. We’ll be looking forward to the news of the React 18 release and expand this article with all the new React features.
Of course, even as it is, React continues to win over developers and businesses all over the world. If you’re looking for an efficient and scalable solution for your web application and need developers that know how to fully take advantage of the React framework, you should consider React development services by TSH. It might be worth your while even when your project is only in the planning stages. After all, our initial consultations are always free of charge.