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'));
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 />);
It's very similar! You use ReactDOM.createRoot instead of the old method.
With this change, a few things happen:
- The
hydratemethod is gone, and is now an option oncreateRoot - 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>
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 reiterate 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
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!
Top comments (23)
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
DingetElementById!Should be:
Good call, updating!
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/
This shows that Cassidy hasn't writtien any vanilla js for months😂
Hey, I actually had to search StackOverflow to figure out the error and had never once thought about the casing of DOM methods.
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.
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.
Suspenseis labeled "experimental" in Preact... I imagine it will eventually land there too.Awesome write up!
Thank you Scott!
Thank again
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.
I can't wait for React 18! The "suspense" is killing me! 😆
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.
Nice write up Cassidy, thanks for the update.
Love how you explained it Cassidy and make it so easy to understand.
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...
You are too fast Cassidy 😅