React 18 Overview: the Main Things to Know About the New Release
On March 29, 2022, the React team announced that React 18 is finally out and available on npm. It’s safe to guess that the React community is really excited about the new version release since the previous one, React v17.0, was released in October 2020.
What does the new v18.0 release bring to the table and does it satisfy the major needs of front-end developers? Let’s find out.
A brief history of React 18 release
The React team published its plan for React 18 release in June 2021. One of the core points of the plan was the process of shifting to React 18 from the v17.0 version. Since React wanted to introduce concurrency but did not want to force it, concurrency in v18.0 was implemented as an opt-in. In this way, developers are free to choose whether to use it or not, and thus they may not need to apply big changes to the app’s code upon shifting to React 18.
Another interesting thing to note is that for the v18.0 release, React assembled a small Working Group that basically consists of the React community. The group included experts, developers, library authors, and educators and the main goal of the group was to create an ecosystem for smooth React 18 adoption. The group provided feedback and tested new features in real-time to ensure the release will be smooth and beneficial for the users and you can find the group on GitHub Discussions.
As well, React regularly published new alphas to npm on its GitHub page. You can find the alphas by the @alpha tag and all library authors are free to try them and provide feedback.
As we can see, React approached its version 18 release with great attention and caution. So did it pay off? Looking at the new features rolled out, we can say that yes, it definitely did.
Concurrency in React
One of the biggest and most exciting updates in a new React version is concurrency. As the React team states, it’s not correct to call concurrency a feature - it is rather a mechanism or an implementation detail. And what exactly does concurrency bring to React? Interruptible rendering is the answer.
Interruptible rendering guarantees consistent and fluid UI which, without a doubt, is vital for any software application. With concurrency enabled, you will be able to:
- Pause rendering of an update in the middle and then continue it;
- Abandon an ongoing rendering;
- Prepare new screens without blocking the main thread;
- Remove and then add back sections from the UI by reusing their previous state;
- Use Offscreen for preparing a new UI in the background before the user reveals it.
An important note here: if you update your app to React 18, new concurrent rendering will work only in those app parts that use the new functionality. In this way, the React team enabled developers to deploy new concurrency features at their own comfortable pace without breaking the existing app’s code.
New features in React 18: what you can already start using
Concurrency might be the biggest update in React 18, but there is also a bunch of other great new features that are incredibly developer-focused. It’s worth noting that new updates in React 18 allow to significantly boost efficiency and performance during the server-side rendering. As well, they now deploy Next.js and Gatsby frameworks which is another big advantage.
In general, React allows to batch updates only inside event handlers. For instance, if there are two state updates inside the same click event, React batches them into one re-render. Such an approach allows to avoid unnecessary re-renders and eliminates manual batching. The drawback though is that React batches only updates during a browser event - so if there is an update of the state after the event was handled, React would treat them as two independent updates.
In React 18, developers introduced automatic batching which means React automatically batches all updates despite their origin (where they come from). This innovation is aimed at reducing the rendering time and improving the performance of applications. And one more great thing about the new batching method in React 18 - it’s an opt-in too.
Transitions are a new feature that allows developers to mark updates either as urgent or non-urgent. This is done so React knows whether a transition can be interrupted. In React 18, you can wrap your updates in one of two options:
useTransition: handled as urgent.
startTransition: handled as non-urgent.
Hence, if you have a startTransition update running, React will interrupt it if a more urgent update comes in. And in case a transition is interrupted by a user, React will render only the latest update while throwing out the rendering work that was not completed.
Suspense is not a brand-new feature since it already existed in the previous versions of React. Its main goal is to let developers declaratively specify the loading state for a part of the component tree in case it’s not ready to be displayed.
So what happened with Suspense in React 18 is that the new version did not change Suspense API but refined its semantics and added several new features to its behavior. These new features are:
- Rendering support for Suspense on the server;
- Committed trees are now always consistent;
- Use of transitions to avoid hiding existing content;
- When content reappears, layout effects re-run.
The official React documentation recommends using Suspense with the transition API for the most efficient performance.
React 18 introduced a bunch of new hooks that aid developers in their work and overall make the development process easier:
useId: a hook for generating unique IDs on the client-side and server-side. If you have a component library integrating with accessibility APIs that require unique IDs, this hook will be extremely useful.
useTransition and startTransition: as described above, these hooks help mark an update either as urgent or non-urgent.
useDeferredValue: allows postponing re-rendering of a non-urgent component of a tree. This hook is similar to debouncing but has a few advantages, such as no fixed time delay or the fact that deferring is interruptible.
useSyncExternalStore: this hook allows external stores to support concurrent reads and removes the need for useEffect during the implementation of subscriptions to external data sources.
useInsertionEffect: a newly introduced hook that enables CSS-in-JS libraries to address performance issues of injecting styles in render.
React did its best to make React 18 as developer-friendly and efficient as possible while considering past performance issues. So did the new release really make developers happy or did it add confusion to the current development process? We’ve talked with SoftTeco’s front-end developers about their thoughts on v.18.0.
The latest version of React, v18.0, provides a lot of powerful features (suspense, automatic batching, concurrent transitions, new hooks), so many developers are looking forward to upgrade their code using these features. But as for me, I prefer to take a pause until the most popular third-party React external API packages support version 18. Since many components in the React ecosystem are external packages, they should support React 18 in order to keep the system up and running. Otherwise, without this support, your app may simply not work.
Alexander Dikusar, Frontend Developer at SoftTeco
I have not yet used new React 18 features but I’ve been following the news for a while and I am really excited to try them out. What interests me the most is the option to use automated batching and improved suspense. To be honest, I wanted to try them for a long time since they really impact productivity a lot.
For instance, with automated batching we can now easily change several states at once without worrying about the fact that a component would re-render for a few times. As for the updated Suspense feature, it now eliminates the need to write down the load conditions inside the component which is really convenient. So I’m hoping to get a chance to work with the new React version when starting a new project and see how all these updates perform.
Oleg Konan, Frontend Developer at SoftTeco
The React team provided a great example of how to ship major updates of the library that is used by millions of developers. I really liked the way they picked the features for the release, how the team provided intermediate results along the way, and how it always listened to the community feedback. Another important thing that I noticed is that the React team focused not only on UX but on DX as well and it shows. So what can I say? Can't wait to try the new version on my current project 🤩
Yegor Kozlov, Frontend Developer at SoftTeco
SoftTecoView all articles by this author.