As of today, React 18 Alpha is here! This is exciting news as the last major release, 17, didn't include new functionality.
What's new?
If you're interested in learning about the new features, I'd encourage you to look at the GitHub discussions. The React team has done a great job of explaining things in detail and is actively answering questions.
The big takeaway is that you can use React 18 without having to change your existing application code. If you want to use the new features, you'll opt in rather than being forced to rewrite large chunks of code.
Cool, is that it?
If that's all you wanted to know and you're ready to dive into the links above, go right ahead! But since I'm me, I found myself wondering about all the terminology I've heard over the past year or so. What is the right way to talk about React 18 going forward?
Suspense
This functionality was available starting with React 16.6. The idea was that you could designate a loading state while you waited for some code to load.
<Suspense fallback={<Spinner />}>
<ProfilePage />
</Suspense>
React 18 does indeed dive into more in the world of Suspense. In fact, the way Suspense works has changed. You can read more in the GitHub discussion but it's helpful to point out the terminology changes. Specifically, the pre-React 18 Suspense implementation is now referred to as Legacy Suspense and the new implementation is Concurrent Suspense. Why? Let's talk concurrent React!
Concurrent
This is the term you'll see most often in all of the various discussions/blog posts. So what exactly is concurrent React? "Concurrent" is the word being used to describe a suite of new features that rely on a specific type of internal implementation.
This includes things like startTransition that helps you account for expensive state transitions. It also covers SuspenseList, a way to coordinate the various Suspense fallback states. There are a couple other headline features, but the big takeaway is that concurrent React is a way of getting, and keeping, your pages interactive--even if they're actively doing other things.
It's important to note that these are not the only concurrent features that will eventually end up in React, but they're a big start on the journey.
Server Components
In December of 2020, Dan Abramov and Lauren Tan gave a great talk introducing server components. In this video they talked about writing React components server side and having the result of that component sent to the client and rendered.
This was a very cool demo! ...and it's not a part of React 18. However, React 18 does set the stage for some of this functionality in the future.
Top comments (3)
Thank you, this post is really helpful I just read this word in a project and was looking for explanation, this explains all.
As someone not working with React, the addition of the "Concurrent" feature set seems really powerful 💪
This was great, thanks for writing it! I like how you were able to explain so many different terms so succinctly. Well done! 👏