fbpx

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 is: Almost all of the benefits of the upgrade don’t require major code changes.

The following are the major changes:

  • The new root API.
  • Suspense
  • Concurrent Features

Before we check these changes in detail, you can check the Materio MUI React Next.js Admin Template. It is the most developer-friendly & highly customizable Admin Dashboard Template based on React. If you’re a developer looking for the Best React Material Admin Template that is enriched with features, and highly customizable look no further than the Materio.

Besides, the highest industry standards are considered to bring you one of the best React Admin Templates. It is not just fast and easy to use, but highly scalable. Furthermore, it offers ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle.

Materio MUI React NextJS Admin Template

Features:

  • Pure ReactJS, No jQuery Dependency
  • Built with Next.js & MUI
  • Utilizes NextJS, React router
  • Based on functional components & React hooks
  • Includes Both TS & JS Versions πŸŽ‰
  • Auth & ACL Support
  • Internationalization/i18n & RTL Ready
  • Code Splitting, Lazy loading

If you are unfamiliar with the admin templates, Admin dashboard templates are basically a collection of web pages created with HTML, CSS, and JavaScript or any JavaScript libraries used to construct the backend user interface of an online application. You can use them to build any kind of web app.

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 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!

To boost up your workflow you can check Best IDE for React, VS Code React Extensions, React JS Unit Testing Tools, and React Developer Tools.

Suspense

Developers across the world are incredibly excited about 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 if 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.


Also, check the: Sneat React NextJS Admin Template.Β You can use this next js admin dashboard for any kind of web app.

Sneat MUI React NextJS Admin Template

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 discussion 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 finalize 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 a 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.

Register to ThemeSelection πŸš€

Sign in with

OR
Already Have Account?

By Signin or Signup to ThemeSelection.com using social accounts or login/register form, You are agreeing to our Terms & Conditions and Privacy Policy
Reset Your Password πŸ”

Enter your username/email address, we will send you reset password link on it. πŸ”“

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.