The React team announced earlier this week that the initial preview for React 18 is live, and work has started for the React 18 release. This is an alpha release and not suitable for production but encourages testing and feedback. Now is the time that library authors can try React 18 and provide feedback and direction before its official release. A primary goal is to prepare the ecosystem for a smooth and graduation adoption of React 18 by using existing applications and libraries.
React 18 Good News
The upgrades provided with React 18 do not require significant code changes! We may need to repeat this and embrace the beauty of the good news. Almost all of the benefits of the upgrade do not require code changes.
React 18 Highlights | UX, Internal Architecture, and More
React 18 includes out-of-the-box improvements (automatic batching), new APIs ( ), and a new streaming server renderer with built-in support for . React 18 also includes architectural improvements for React server-side rendering (SSR) performance.
New Opt-In Mechanism?
Concurrent Rendering (the new opt-in mechanism) and let's React prepare multiple versions of the UI simultaneously. This change is primarily behind the scenes, but it unlocks new possibilities to improve your app's actual and perceived performance.
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. According to the working team at React, many users will be able to upgrade within a single afternoon.
The New Root API
This ReactDOM.render() is now called the Legacy Root API. It works the same way as React 17. You can still use this but know that it will be deprecated eventually.
New Root API
Very similar to the previous Root API. With React 18 use 
.
The React 18 Root API change means:
• The hydrate method and render callback are gone
• There is now a createRoot option
When you switch 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 the client to React 18. If you only use React client-side, you are finished.
startTransition API
The new API helps with webpage responsiveness. The startTransition can not only keep current webpage responsive and able to perform heavy non-blocking UI updates at the same time.
Think of it when a user types in a search box, the input value is immediately updated while the research results may wai t afew milliseconds. The API provides a way to differientation between quick and delayed updates. The delayed udpates is referred to as Transition Updates.
Heavy UI or non-urgent updates we can wrap with startTransition API as:
Server-Side Rending Improvements
React 18 offers full support for Suspense; if you remember, React 16 had support but not full support.
Suspense is a functionality set that allows for waiting for data to resolve before a state transition (delayed transitions), reducing UI clashes while data loads (placeholder throttling), and coordinating the appearance of a set of components by streaming them in order (SuspenseList). With React 18, we can break React components into smaller chunks using .
TimeLine
There is no specific release date scheduled, but we should expect something over the next few months.
• Library Alpha: Available June 2021
• Public Beta: June 2021 + a few months
• Release Candidate (RC): Several weeks post Beta Release
• General Availability: Several weeks post RC
Alpha, Beta, Gamma? (the good old days ;)
Alpha
The initial preview. Most features are stable, but work is being done to finalizes 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!
I am excited to check out the Alpha, as React 17 was the building block for the highly anticipated React 18. I would love to read your insights on the new alpha.
Top comments (4)
I hope that the new 'startTransition' won't make unit tests harder.
Hi Brendan, according to Ricky from React (Rick Hanlonii)
In React 18 we’re introducing a new API that helps keep your app responsive even during large screen updates. This new API lets you substantially improve user interactions by marking specific updates as “transitions”. React will let you provide visual feedback during a state transition and keep the browser responsive while a transition is happening.
What problem does this solve?
Building apps that feel fluid and responsive is not always easy. Sometimes, small actions like clicking a button or typing into an input can cause a lot to happen on screen. This can cause the page to freeze or hang while all of the work is being done.
For example, consider typing in an input field that filters a list of data. You need to store the value of the field in state so that you can filter the data and control the value of that input field. Your code may look something like this:
// Update the input value and search results
setSearchQuery(input);
Here, whenever the user types a character, we update the input value and use the new value to search the list and show the results. For large screen updates, this can cause lag on the page while everything renders, making typing or other interactions feel slow and unresponsive. Even if the list is not too long, the list items themselves may be complex and different on every keystroke, and there may be no clear way to optimize their rendering.
Conceptually, the issue is that there are two different updates that need to happen. The first update is an urgent update, to change the value of the input field and, potentially, some UI around it. The second, is a less urgent update to show the results of the search.
// Urgent: Show what was typed
setInputValue(input);
// Not urgent: Show the results
setSearchQuery(input);
Users expect the first update to be immediate because the native browser handling for these interactions is fast. But the second update may be a bit delayed. Users don't expect it to complete immediately, which is good because there may be a lot of work to do. (In fact, developers often artificially delay such updates with techniques like debouncing.)
Until React 18, all updates were rendered urgently. This means that the two state states above would still be rendered at the same time, and would still block the user from seeing feedback from their interaction until everything rendered. What we’re missing is a way to tell React which updates are urgent, and which are not.
How does startTransition help?
The new startTransition API solves this issue by giving you the ability to mark updates as “transitions”:
import { startTransition } from 'react';
// Urgent: Show what was typed
setInputValue(input);
// Mark any state updates inside as transitions
startTransition(() => {
// Transition: Show the results
setSearchQuery(input);
});
Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.
Transitions lets you keep most interactions snappy even if they lead to significant UI changes. They also let you avoid wasting time rendering content that's no longer relevant.
Thanks @michelledev3 , very well explained
Hey Michelle, under "Server-Side Rendering Improvements" , the last line is probably incomplete or maybe i didn't get it. Can you confirm?