React remains one of the most popular front-end technologies thanks to its simplicity and flexibility achieved through long-established development choices. We’re now in the 19 stable version of React and this version is bringing a lot of interesting developments, including the experimental React Compiler, Actions, new hooks for Actions, or React Server Components (RSC). Let’s take a closer look at them.
* This article has been updated to reflect the latest state of things regarding React’s latest version and features. React 19 is now the current stable version.
Did you know that React is already 12 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 Stack Overflow 2020 survey, React was the most in-use frontend development framework among developers (only behind the jQuery library, but ahead of all full-fledged frontend development frameworks). And it remains one in the Stack Overflow 2024 survey.
:quality(75))
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, contributing to improved development performance. This JavaScript library is also very efficient in terms of memory usage.
It doesn’t mean that devs are not looking forward to some new React 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.
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.
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.
Let’s now jump to React 18, which saw a lot more interesting additions to what React developers know and love.
React 18 – what’s in the upcoming React version?
React 18 is here
Following the scalability-focused version 17 described above, we’ve got a more feature-filled version 18.
React users get:
out-of-the-box improvements (including automatic bathing),
new streaming server renderer with built-in support for React.lazy,
other concurrent features such as startTransition, useDeferredValue,
new root API.
However, the most important, new addition in React 18 seems to be the concurrent rendering and the related concurrent mode. Let’s take a closer look at them.
Concurrent rendering & mode
TSH’s frontend developer Rafał Bąbiński has already fiddled with the concurrent mode and has quite a few things to say about it:
"What exactly is concurrency? Without this feature, we can assign one activity at a time. In contrast, concurrent tasks can overlap. Not only does it mean that we can always do multiple activities at once, but that we are prepared and ready for it.
To put in the context of the React world – previously only one setState update was possible at a time and all updates had the same priority. The new concurrent feature startTransition coupled with the ability to mark non-urgent updates is a breakthrough solution. They can be interrupted or put on hold based on priority.
React 18 brings up a new concurrency model. It's a bit different than the concurrent mode introduced three years ago in React 16. It's no longer a switch that you have to turn on at the root of your application. Now it's called concurrent rendering. The naming change is the key, and it describes the new approach perfectly. It happens automatically, as you use some of the new concurrent features. You can upgrade to React 18 without any changes to concurrency and then adopt new features at your own pace. These features are completely optional.”
Roadmap & the future
Despite all the changes React 18 brings, we can take comfort in knowing that we can warm to them at our own pace. You can read more about the roadmap on the official React website, but just to make a quick recap:
There are no big out-of-the-box breaking changes to component behavior related to concurrency,
Upgrading to React 18 doesn’t require any significant changes to the application code,
And that’s it for the React 18 update. Let’s look at React 19.
React 19 – what’s in it?
React 19 is here
React 19 focuses heavily on performance, including the streamlining og asynchronous data handling.
This release builds upon React 18 by bringing experimental features like Server Components and Actions to a stable state, while introducing new hooks and optimizations.
The goal of React 19 to make it easier for developers to build web applications with less boilerplate code.
React 19 latest features
Here are some of the most important features introduced in React 19.
Actions
– They simplify asynchronous operations like form submissions and API calls. They integrate directly with React’s rendering cycle, automatically managing pending states or error handling.
Server Components
–They allow developers to render components on the server. The result is faster initial page load, improved performance, and better SEO.
The React Compiler
– React Compiler optimizes your components by applying memoization where beneficial, often eliminating the manual need for hooks like useMemo. This is something that many React developers have been waiting for!
Improved Context API
– Optimizations for the Context API may lead to fewer re-renders and more efficient context updates.
Support for Custom Elements
– React 19 offers full support for Web Components. It may make it easier to reuse components.
New Hooks for form handling
– React 19 introduces several new hooks like useActionState, useFormStatus, or useOptimistic to make it easier to use Actions.
Ref as a Prop
– React 19 introduced a simplified handling of refs. They can now be passed as regular props. forwardRef may not be needed as often!
That’s quite an interesting feature list, isn’t it?
Latest React release – summary
And that’s it for the latest React version report. What do you think about the changes? Do you like them? I sure do – the experimental React Compiler in particular can be a true game-changer, quickly transforming your code into plain JavaScript without any need for external tools – faster performance that can be achieved faster than ever before!
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 make a React test of your own application – so make sure to bookmark the article.
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.
We will continue to update this article with data about new release candidate every time it appears, covering subjects such as fixed event handling, officially supported context API, React DOM, fixed occasional test failures, React components or fix iframe warnings.
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!
Authors
Adrian Senecki
Copywriter and budding fiction writer, interested in (but not limited to) the business side of software development. Likes acquiring new skills and foretelling the future.