What’s New in React 18 & Release Date

react 18

So, React 18 alpha is here now with some amazing features and updates. Soon, React 18 will be on board as React developers have started working on it. In this article, we will get to know the features of React 18 alpha and upcoming updates in react alpha stable version.

Well, we all have been waiting for a long for this update. They have kept us in suspense long enough, but yes ReactJS developers have now released the alpha version that offers some new features to play with!! The best part: Almost all of the benefits of the upgrade don’t require major code changes.

Following are the major changes:

  • The new root API.
  • Suspense
  • Concurrent Features

Before we check these changes in detail, you can check Vuexy ReactJS Admin Template. It is the most developer-friendly & highly customizable React Admin Template. It is based on Create React App, Redux & Reactstrap.

Features:

  • 6 Workable applications
  • Figma and Sketch File added
  • Multi-lingual
  • RTL supported and many more

You can also check some collections of ReactJS Unit Testing Tools, Admin Dashboard Template React, and a guide to React Ecosystem.

Now, let’s check what are the new changes in React 18 Alpha..!!

The New Root API

Now, React has always had to have some kind of root. You must be used to seeing something like this at the top level of your applications:


import ReactDOM from ‘react-dom’; 
import App from 'App'; 
ReactDOM.render(, document.getElementById('root'));

This ReactDOM.render() is now called the Legacy Root API. It works the exact same way as React 17. Besides, You are still allowed to keep this, but it will be eventually deprecated.

The New Root API looks a little different. Like this:


import ReactDOM from ‘react-dom’;
import App from 'App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

It’s kind of similar! You use ReactDOM.createRoot instead of the old method.

With this change, a few things happen: – The hydrate the method is gone and is now an option on createRoot – The render callback is gone (and can now be a prop passed into <App /> or whatever you give to the root)

If you don’t use these two functions, then you don’t have to worry about their changes. By switching to the New Root API, you automatically get the new out-of-the-box improvements that come with React 18!

This change is all you need to do to upgrade your client to React 18. If you only use React client-side, then you’re done and can skip to the installation section below!

Suspense

Developers across the world are incredibly excited for Suspense. It is finally coming out with full support. React 16 had support for it, technically, but it was never full support, and it was not very easy to understand.

Now, what is Suspense? Well, It’s a set of functionality that allows for waiting for data to resolve before a state transition (AKA delayed transitions), reducing UI clashes while data loads (AKA placeholder throttling), and coordinating the appearance of a set of components by streaming them in order (AKA SuspenseList).

If you have used Suspense before, you may see some “Legacy Suspense” behavior changing, but you are going to use it the first time, the summary is that you wrap your components in a <Suspense> component, like so:

<Suspense fallback={<Loading />}>
  <SomeComponentThatSuspends />
  <SomeOtherComponent />
</Suspense>

In this example, React will show the <Loading /> the component at first, and then will replace <Loading /> with <SomeComponentThatSuspends /> and <SomeOtherComponent /> when the data is resolved in <SomeComponentThatSuspends />.
It’s different from previous versions: Nothing inside of the <Suspense /> the component will be rendered until the data is resolved!

Concurrent features

There are a few methods that come with React 18 that are completely opt-in. Not all of them are documented yet, but they will be as the version is optimized:

  • startTransition: keep the UI responsive during a big state transition.
  • useDeferredValue: defer updating less important parts of your app.
  • <SuspenseList>: coordinate the order in which loading indicators show up.
  • Server-side rendering with selective hydration: has your app load and become interactive faster.

What’s nice about each of these features is that you don’t have to include all of them throughout your whole application. You can opt-in to build with them in just certain parts of the app, which is very nice and flexible.

These updates are primarily aimed at maintainers of third-party libraries.

What’s coming in React 18

When it’s released, React 18 will include out-of-the-box improvements (like automatic batching), new APIs (like startTransition), and a new streaming server renderer with built-in support for React.lazy.

These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind the scenes, but it unlocks new possibilities to improve both the real and perceived performance of your app.

If you’ve been following our research into the future of React (we don’t expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means you will be able to adopt React 18 without rewrites and try the new features at your own pace.

A gradual adoption strategy

Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort compared to a typical major React release. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon.

ReactJS Team has successfully shipped concurrent features to tens of thousands of components at Facebook, and they have found that most React components “just work” without additional changes.

Working with the community

For React 18 Development, a panel of experts, developers, library authors, and educators from across the React community were invited to participate in React 18 Working Group to provide feedback, ask questions, and collaborate on the release.

The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries. The Working Group is hosted on GitHub Discussions and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog.

For more information on upgrading to React 18, or additional resources about the release, see the React 18 announcement post.

How to try React 18 Alpha today

New alphas are regularly published to npm using the @alpha tag. These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in alpha the following weekday.

There may be significant behavioral or API changes between alpha releases. Please remember that alpha releases are not recommended for user-facing, production applications.

Projected React 18 release timeline

They haven’t released any specific date scheduled, but after several months of feedback and iteration before React 18 is ready for most production applications.

  • Library Alpha: Available today
  • Public Beta: At least several months
  • Release Candidate (RC): At least several weeks after Beta
  • General Availability: At least several weeks after RC

More details about our projected release timeline are available in the Working Group. We’ll post updates on this blog when we’re closer to a public release.

Alpha

The initial preview. Most features are stable, but work is being done to finalizes new APIs and stylesheets.

Beta

Once React 18 is feature complete, the React 18 Beta will be released. The Beta version includes all of the breaking changes and new features to the final release. Beta is also a time for a larger community (outside of the library authors) to start trying React 18, provide feedback, and report any remaining issues.

RC

When React 18 is fully feature complete and confident in the stability of the release, it becomes a release candidate.

Stable

Then React 18 can release!

Conclusion:

So, this was the detailed article on React 18 updates and future releases. Here we have discussed the features provided in the alpha version and possible updates in React 18.

The aim of this article is to keep you up-to-date regarding React 18. We’ll keep updating this article with the updates released by ReactJS. So, keep this article in check. Don’t forget to bookmark it and share.

We hope you find this article helpful.

 

Related Posts

Register to ThemeSelection 🚀
faceface
emailemail
visibilityvisibility

By Signin or Signup to ThemeSelection.com using social accounts or login/register form, You are agreeing to our Terms & Conditions and Privacy Policy

Already have account?
Reset Your Password
Enter your username/email address, we will send you reset password link on it. 🔓

Looking for more Freebies  ! 

Get notified 💌 about upcoming Free Admin Themes, UI-Kits, 
Unique promo codes  and Sales ! 🥳
SUBSCRIBE NOW
We promise not to spam you. You can unsubscribe at any time.
10% Off 🥳  when you use promo code 10PERCENTOFF and complete your order today!
close-image
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.