What’s New in React 18 Alpha?

React 18 Alpha has been released last week with some new features and React Team created a working group for the community to understand the gradual adoption of new features.

Let’s see what are the new features

1. Automatic Batching
2. Start Transition
3. New Suspense SSR
4. Concurrent Suspense

Automatic Batching

Let first see what is batching?

Batching means grouping multiple state update into a single render to optimize the App performance.

Try the demo in codesandbox

We can see, The handleClick has two setState. When we click the Next button, The component renders only once. You can see the log in console.

React 17 also perform batch updates, But it used to batch update only for browser events, not for callbacks. Check the below code snippet for more details

Try the demo in codesandbox

We can see in the console that the component is rendered two times when the Next button is clicked. React does not batch update inside setTimeout, promise or any other events. To overcome this Automatic Batching is introduced in React 18.

Automatic Batching performs batch updates in all events. So the performance of the App is increased when compared to the earlier version of React.

So how to get this optimized performance in React Apps?

Update your react version to 18 (as of now 18 Alpha) and include createRoot to ReactDom render like below

Now all your updates are batched automatically. Check the below code example

Try the demo in codesandbox

In the above example, we can see in the console that the component is updated only once, Although the state update logic is included inside the promise. This will improve the app performance by avoiding unwanted renders.

There might be some cases where batch updates are not required, Where we can use flushSync as below

Start Transition

Start Transition updates are classified into two types

1. Urgent Updates
2. Transition Updates (Slow Updates)

Start Transition is focused on the User Experience of the App. The updates made inside transition run in the background.

Check the below code

setSearchQuery will be interrupted If an urgent update like user interaction events triggered.

React provide a hook for transition with isPending

isPending state can be used to show the loading state to the user. If the current transition is in progress.

React recommends using Transition for remote data fetching and large data updates in UI.

New Suspense SSR

Suspense SSR is for rendering react components in the server. Now suspense supported for server-side rendering also.

First, let us see what is SSR?

SSR generate React components to HTML on the server and send the HTML to the client. SSR lets the users see the page content before the JavaScript bundle loads and executes.

Drawbacks in SSR

1. Entire HTML needs to be generated in the server before sent to the user. The user needs to wait till the HTML is generated.
2. Need to wait till all the JavaScript are downloaded, To interact with the component.

This is a very bad UX for the users. To overcome this, React introduced two new features

Two major SSR features are

1. Streaming HTML
2. Selective Hydration

Streaming HTML

In Streaming HTML react will send Static HTML like Menus, Header to Client as soon as they are ready and will load the heavy lifting components( which depend on data from database like comments component) later once it is ready to stream. Now the user does not require to wait for the entire HTMT to Load, To see the initial UI render.

But still, the rendered UI is not interactive. It needs to wait till the JavaScript are loaded. So here Selective Hydration comes to action.

Hydration is the process of connecting JavaScript to the server-generated HTML.

Selective Hydration

Selective Hydration prioritizes which component JavaScript needs to be loaded first. When component script loading is in progress, If the user tries to interact with any of the components. React will listen to that event and hydrate the interacted component as the first priority.

These new SSR features will solve

1. Not Required to wait to generate all the HTML in the server.
2. Not Required to wait to load all JavaScript to make the component interactive.
3. Not Required to wait for all components to hydrate and interact with the component.

Concurrent Suspense

Now Suspense comes with full support. Like

1. Delayed transitions (Before proceeding with state transitions, It waits for the data to resolve).
2. Placeholder throttling (reducing UI crash by throttling the appearance of nested, successive placeholders).
3. SuspenseList (coordinating the appearance of a list of components, like by streaming them in order).

Check the Suspense Example

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

New Change in React 18 Concurrent Suspense is that nothing inside the <Suspense /> component will be rendered until the data is resolved!

But in Legacy suspense (Suspense in React 17) sibling component is mounted immediately to the DOM, Its effects and lifecycles are fired and are hidden from UI.

Check the difference between Concurrent Suspense and Legacy suspense with the examples shared by React Core Team.

Legacy Suspense Example — https://codesandbox.io/s/keen-banach-nzut8?file=/src/App.js

Concurrent Suspense Example — https://codesandbox.io/s/romantic-architecture-ht3qi?file=/src/App.js

Let’s Try React Alpha Now

To Install React 18 alpha, use the @alpha tag

Resources

1. React Blog — https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
2. React 18 Working Group — https://github.com/reactwg/react-18

Nilanth S,
React Team,
Mallow Technologies.