Back to all blogposts

React latest version – the no-features version 17 changes more than you think

Adrian Senecki

Adrian Senecki

Content Creator

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 development 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. Witch each release, its popularity reached a new record figure.

In fact, according to the latest Stack Overflow 2020 survey, React is the most in-use frontend development framework among developers (only behind the jQuery library, but ahead of all full-fledged frontend development frameworks).

React is the most frequently mentioned frontend framework in SO 2020

Why is React so popular?

Such popularity is usually attributed to the features that made React development 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 frontend development since the beginning.

It doesn’t mean that devs are not looking forward to some new React features. However, in React 17, the developers behind the popular 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”. How is something so unusual in the world of software development a good thing? Or maybe it is some kind of joke?

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.

New approach to updating React

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? Is it really the solution to the problem of extending React without sacrificing anyone in the process?

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…

document.addEventListener()

React will now call:

rootNode.addEventListener()

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.

💡 Read more: are you also interested in React Hooks? Learn more about React Hooks from this Hooks and Redux tutorial.

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:

  • Far more user-friendly error reporting in the browser by switching from React-printed component stack traces to ones generated from regular native JavaScript stacks.
  • 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.

Latest React release – summary

And that’s it for a ReactJS latest version that marks the first major React update 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. Every time a new latest React version comes up, you can be sure to find all the essential information about it here, including how to maka a React test of your own application.

Of course, even as it is, React continues to win over developers and businesses all over the world. If you aren’t familiar with it, I think that now you can add React to your list of considerations for your next software project.

And if you’re already 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.

Give it a try!

Interested in more React Native reports, including the latest features of all the upcoming React Native versions?

Be as up-to-date as possible by subscribing to Techkeeps – a bi-weekly list of curated stories on all the topics that make a modern day professional

You may also like

What do you want to achieve?





    You can upload a file (optional)

    Upload file

    File should be .pdf, .doc, .docx, .rtf, .jpg, .jpeg, .png format, max size 5 MB

    Uploaded
    0 % of

    or contact us directly at [email protected]

    This site is protected by reCAPTCHA and the Google
    Privacy Policy and Terms of Service apply.

    Thanks

    Thank you!

    Your message has been sent. We’ll get back to you in 24 hours.

    Back to page
    24h

    We’ll get back to you in 24 hours

    to get to know each other and address your needs as quick as possible.

    Strategy

    We'll work together on possible scenarios

    for the software development strategy in sync with your goals.

    Strategy

    We’ll turn the strategy into an actionable plan

    and provide you with experienced development teams to execute it.

    Our work was featured in:

    Tech Crunch
    Forbes
    Business Insider

    Aplikujesz do

    The Software House

    Copied Tekst skopiowany!

    Nie zapomnij dodać klauzuli:

    Kopiuj do schowka

    Jakie będą kolejne kroki?

    Phone

    Rozmowa telefoniczna

    Krótka rozmowa o twoim doświadczeniu,
    umiejętnościach i oczekiwaniach.

    Test task

    Zadanie testowe

    Praktyczne zadanie sprawdzające dokładnie
    poziom twoich umiejętności.

    Meeting

    Spotkanie w biurze

    Rozmowa w biurze The Software House,
    pozwalająca nam się lepiej poznać.

    Response 200

    Response 200

    Ostateczna odpowiedź i propozycja
    finansowa (w ciągu kilku dni od spotkania).

    spinner