---
title: "React 18 Alpha is out! Now what?"
description: "React 18 Alpha is here! Here"
source: "https://www.netlify.com/blog/2021/06/08/react-18-alpha-is-out-now-what/"
last_updated: "2026-07-15T17:20:25.000Z"
---
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(, document.getElementById('root'));
```
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();
```
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 `` 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](https://github.com/reactwg/react-18/discussions/5) 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 `` component, like so:
```
}>
```
In this example, React will show the `` component at first, and then will replace `` with `` and `` when the data is resolved in ``.
I want to reinterate this, because [it’s different from previous versions](https://github.com/reactwg/react-18/discussions/7): Nothing inside of the `` component will be rendered until the data is resolved! You can see a code sample from the React core team using this [here](https://codesandbox.io/s/romantic-architecture-ht3qi?file=/src/App.js).
## 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`](https://github.com/reactwg/react-18/discussions/41): keep the UI responsive during a big state transition.
- `useDeferredValue`: defer updating less important parts of your app.
- ``: coordinate the order in which loading indicators show up.
- [Server-side rendering with selective hydration](https://github.com/reactwg/react-18/discussions/37): 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
```
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](https://github.com/reactwg/react-18/discussions/9), which also includes other functions that aren’t implemented yet.
The [React Working Group](https://github.com/reactwg/react-18/discussions) 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](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html)!
‘Til next time!
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=React 18 Alpha is out! Now what?&url=https://www.netlify.com/blog/2021/06/08/react-18-alpha-is-out-now-what//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F06%2F08%2Freact-18-alpha-is-out-now-what%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/06/08/react-18-alpha-is-out-now-what//)
- [Bluesky](https://bsky.app/intent/compose?text=React 18 Alpha is out! Now what?+https://www.netlify.com/blog/2021/06/08/react-18-alpha-is-out-now-what//)
* * *
### Tags
- [React](/blog/tags/react/)
## Keep reading
Guides & Tutorials December 17, 2020
[
### React Children: The misunderstood prop
](/blog/2020/12/17/react-children-the-misunderstood-prop/)
- 
Cassidy Williams
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
## Recent posts
News & Announcements July 14, 2026
[
### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers
](/blog/new-pro-plan-tiers)
- 
Gehrig Kunz
News & Announcements July 13, 2026
[
### Netlify inside of Claude Design
](/blog/netlify-inside-of-claude-design)
- 
Sean Roberts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)