DEV Community

loading...
Cover image for React 18 Alpha is out! Now what?

React 18 Alpha is out! Now what?

Cassidy Williams
bold and brash
Originally published at netlify.com on ・3 min read

Hello!

They kept us in Suspense long enough, but HECK React developers have some new features to play with!!
The best part: Almost all of the benefits of the upgrade don't require major code changes.

The New Root API

React has always had to have some kind of root. You're probably used to seeing something like this at the top level of your applications:

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

ReactDOM.render(<App />, document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode

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

The New Root API looks a little different:

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

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

root.render(<App />);
Enter fullscreen mode Exit fullscreen mode

It's very 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 in to <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. If you'd like more details on them, there's some code change examples here from the React core team.

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! If you use server-side React or want to learn more about Suspense, keep reading.

Suspense

Puns aside, I think we are ALL incredibly excited for Suspense 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.

Soooo what the heck is Suspense? 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 played with Suspense before, you might see some "Legacy Suspense" behavior changing, but if you'd like to try it out for the first time, the summary is that you wrap your components in a <Suspense> component, like so:

<Suspense fallback={<Loading />}>
  <SomeComponentThatSuspends />
  <SomeOtherComponent />
</Suspense>
Enter fullscreen mode Exit fullscreen mode

In this example, React will show the <Loading /> component at first, and then will replace <Loading /> with <SomeComponentThatSuspends /> and <SomeOtherComponent /> when the data is resolved in <SomeComponentThatSuspends />.

I want to reinterate this, because it's different from previous versions: Nothing inside of the <Suspense /> component will be rendered until the data is resolved! You can see a code sample from the React core team using this here.

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.

Enough already! How do I install it?

You can use the @alpha tag to install React 18 right away:

npm install react@alpha react-dom@alpha
Enter fullscreen mode Exit fullscreen mode

It will be months before the Alpha reaches Beta, and more time after that until it's fully stable. You can see more details about the roadmap here, which also includes other functions that aren't implemented yet.

The React Working Group has a full set of questions and discussions about these features as well, if you'd like to read more, as well as their announcement blog post!

'Til next time!

Discussion (23)

Collapse
ajcwebdev profile image
anthony-campolo

Thanks for the write up Cassidy and thank you to the React team for all the work they've done to include the community in these processes.

Also watch out for the capital D in getElementById!

const root = ReactDOM.createRoot(document.getElementByID('root'));
Enter fullscreen mode Exit fullscreen mode

Should be:

const root = ReactDOM.createRoot(document.getElementById('root'));
Enter fullscreen mode Exit fullscreen mode
Collapse
cassidoo profile image
Cassidy Williams Author

Good call, updating!

Collapse
ajcwebdev profile image
anthony-campolo

I created a little sample application as well using Vite with Netlify deployment included.

github.com/ajcwebdev/ajcwebdev-rea...

dev.to/ajcwebdev/a-first-look-at-r...

ajcwebdev-react18.netlify.app/

Collapse
aslemammad profile image
M. Bagher Abiat

This shows that Cassidy hasn't writtien any vanilla js for months😂

Thread Thread
ajcwebdev profile image
anthony-campolo

Hey I actually I had to search StackOverflow to figure out the error and had never once thought about the casing of DOM methods.

Collapse
ben profile image
Ben Halpern

This is the first time I've carefully read about Suspense (I've seen it around but always skimmed past actually understanding it).

I like the pattern. It seems like a high value-add to the ecosystem.

Collapse
lukeshiru profile image
LUKE知る

I feel kinda weird about it. Is almost like a violation of the one-way data flow, because a child component is updating a "state" in the parent directly when it pleases, and the parent only controls the "fallback". The child is actually expecting to be inside a suspend, so it might not even work outside of one.

I believe that there are clearer ways of handling scenarios as the ones Suspense is trying to solve, with libraries like React Query or even with "vanilla" React hooks.

I might change my opinion when I actually try it.

Collapse
cassidoo profile image
Cassidy Williams Author

Yes! I think it was much more nebulous before because of the lack of full support, but now it's something that has really practical applications.

Collapse
ben profile image
Ben Halpern

Suspense is labeled "experimental" in Preact... I imagine it will eventually land there too.

Collapse
larsejaas profile image
LarsEjaas

Sorry but you missed a HUGE part for anyone using frameworks like gatsby.js and next.js!! React.lazy now works with serverside rendering out of the box! No more 'funny code' to check if the code is running on a server or in the browser, it just works out of the box. This can be used in several ways, but an example would to defer parts of the code that isn't necessary when initially loading a webpage because it's used for 'below the fold' content. This stuff is super powerful when optimizing web pages for speed and SEO.

Collapse
anthonycook profile image
Anthony Cook

I can't wait for React 18! The "suspense" is killing me! 😆

Collapse
stolinski profile image
Scott Tolinski

Awesome write up!

Collapse
cassidoo profile image
Cassidy Williams Author

Thank you Scott!

Collapse
wintercounter profile image
Victor Vincent

I really would like to see Suspense support ordenary promises using a hook based API. At it's current form we will still need custom wrappers around Apollo, React Query, etc. during SSR, which we can simply avoid and fine-tune with a few API changes.

Collapse
etabrizi profile image
Emyr Tabrizi

Nice write up Cassidy, thanks for the update.

Collapse
ngduc profile image
Duc Ng

Great news.
Can't wait to work with the final version 18.
I've just played around with React 18, Typescript, Vite and Vercel, wrote about it here:
nnote.io/s/x4od5/try-react-18-with...

Collapse
thedaviddias profile image
David Dias

You are too fast Cassidy 😅

Collapse
shrutikapoor08 profile image
Shruti Kapoor

Love how you explained it Cassidy and make it so easy to understand.

Collapse
an1meshk profile image
Animesh Kumar

Nice and concise information, no one can wrap up any release in single write up. At least good to know news stuff without looking into complete release details.

Collapse
sirdarknight profile image
SirDarknight

Why would someone use React in 2021 unless you're working on an existing project or your job requires it? Vue 3 and Svelte are so much better in every single way.

Collapse
paulm17 profile image
Paul • Edited

Have you used hooks? How about the eco-system?

I currently work with BlitzJS. It has Next.JS and React under the hood. I am 10x more productive than with Vue 2.

At this point, I couldn't care less about Vue 3. What does it bring to the table? Nothing.

Where is React-Query? Hmm? How about React-Table, React-Virtual, Final Form, Zod, just to name a few. Sure, I can see you are scrambling now on Google to find their Vue equivilents. But with BlitzJS, you no longer have to think in terms of FE and BE. I can do things like putting up a complex form, validating it on the FE AND BE and then adding to the database with full error capability. Oh and in under 2 minutes. Not 10 mins or so with Vue or Svelte.

I shudder to think the steps involved to do this with Vue 3 or Svelte.

Also Typescript, omg. Sure Vue3 has it now and Svelte they are talking about it? Like I say, who cares.

I'm far more productive now than I ever was. Oh and we are talking from small apps, to small sites. To large very large and complex enterprise apps. Vue and Svelte fall apart when you go past the small stage. So many comments on HN from people who went from Vue to React with big apps.

Collapse
bobgravity1 profile image
bobgravity1

dude... stfu lol

Forem Open with the Forem app