React 18 Alpha has been released last week with cool new features and a working group to understand the community for gradual adoption of new features.
Let's see what are the new features
- Automatic Batching
- Start Transition
- New Suspense SSR
- Concurrent Suspense
Automatic Batching
Let first see what is batching?
Batching is grouping multiple state update into a single render to optimize the performance.
Let see this with a code example
Try the demo in codesandbox
We can see, The handleClick has two setState inside it. But when we click the Next button the component renders only a single time. You can see the log in console.
Batching already exists in React 17, But React used to batch update only for browser events, not for callbacks. Check the below code for more details
Try the demo in codesandbox
We can see the component is rendered two times in the console when the Next button is clicked. React does not batch update inside promise, setTimeout or any other events. To overcome this Automatic Batching is added in React 18.
Automatic Batching performs batch updates in all events. So we get automatically a better performance compared to the older version of React.
So what we need to do for getting this better performance in our app?
Just update your react version to 18 (as of now 18 Alpha) and add createRoot to your ReactDom render like below
ReactDOM.createRoot(rootElement).render(<App />);
Now all your updates are batched automatically. Check the below code example
Try the demo in codesandbox
In the above example, we can see the component is updated only once in the console, Although the states are updated inside the promise. Cool is it, It will improve the app performance by avoiding unwanted renders.
If we don't want to batch the updates we can use flushSync as below
import { flushSync } from 'react-dom'; // Note: react-dom, not react
function handleClick() {
flushSync(() => {
setCounter(c => c + 1);
});
// React has updated the DOM by now
flushSync(() => {
setFlag(f => !f);
});
// React has updated the DOM by now
}
Start Transition
Start Transition classifies the state update into two types
- Urgent Updates
- Transition Updates (Slow Updates)
Start Transition mainly focus on the User Experience of the app. As updates inside transition run in the background slowly.
Check the below code
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);
});
setSearchQuery will be interrupted If an urgent update like user interaction events comes in.
React provide a hook for transition with isPending
import { useTransition } from 'react';
const [isPending, startTransition] = useTransition();
isPending can be used to show the loading state to the user. If the transition is in progress.
React recommends using Transition for remote data and large data updates in UI.
New Suspense SSR
This feature 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 HTML from React components on the server and send that HTML to the client. SSR lets the users see the page's content before the JavaScript bundle loads and runs.
Drawbacks in SSR
Entire HTML need to be rendered in the server and downloaded, To show the UI to the user.
Need to wait till all the JS are downloaded, To make the component interactive.
This makes the UX a very bad experience for the users. To overcome this, React has introduced two new features
Two major SSR features are
- Streaming HTML
- Selective Hydration
Streaming HTML
With Streaming HTML react will send Static HTML like Header, Menus 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. So now the user does not require to wait, To see the initial UI render.
But still, the rendered UI is not interactive it needs to wait till the JS are loaded. So here Selective Hydration comes to play
Hydration is the process of connecting JS to the server-generated HTML.
Selective Hydration
Selective Hydration prioritizes which component JS needs to be loaded first. When component loading is in progress, If the user tries to interact with any of the components. React will detect that event and hydrate the interacted component first.
These new SSR features will solve
No longer to wait to render all HTML in server
No longer to wait to load all JS to make the component interactive
No longer waiting for all component to hydrate to interact with the a component.
Concurrent Suspense
Now Suspense comes with full support. Like
Delayed transitions (waiting for the data to resolve before proceeding with state transitions).
Placeholder throttling (reducing UI thrash by throttling the appearance of nested, successive placeholders).
SuspenseList (coordinating the appearance of a list or grid of components, like by streaming them in order)
Check the Suspense Example
<Suspense fallback={<Loading />}>
<ComponentThatSuspends />
<Sibling />
</Suspense>
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 immediately mounted to the DOM, its effects and lifecycles are fired and it is hidden from UI.
Check the difference between Legacy suspense and Concurrent 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 the latest React 18 alpha, use the @alpha tag
npm install react@alpha react-dom@alpha
It will take some months to reach Beta from Alpha and will take more time to reach a stable release. Check out the React Working Group for more details.
Reference
React Blog - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
React 18 Working Group - https://github.com/reactwg/react-18
Need to learn more? Feel free to connect on Twitter :)
Top comments (0)