React 18 Adds Concurrent Renderer

React 18 Adds Concurrent Renderer

React 18 Adds Concurrent Renderer

Thursday, 06 January 2022

Facebook made a number of announcements at the recent React Conference 2021, with more news on React 18 including the first release candidate, and an update to the Create React App. 

React is Facebook’s open source JavaScript library, which lets you describe what you want to render in a declarative way using shared components and elements. The React 18 release candidate is available to try now.

React 18 has a number of new features and improvements that the developers say are possible thanks to the new opt-in “concurrent rendering” mechanism in React 18 that enables React to create multiple versions of the UI at the same time. The team says that though this change is mostly behind the scenes, it will unlock new possibilities to improve the app performance.

The concurrent renderer and updates to Suspense have been added without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release.

This means there is no concurrent mode, only concurrent features.

The next major improvement to React 18 is to the react server-side rendering. Server-side rendering generates HTML from the react components on the server and sends it back to the client, so the client can now see the page content before the JavaScript bundle load and run. Unfortunately, SSR doesn't allow components to wait for data, so before rendering HTML to the client, you must have your data ready for components on the server.

The improvement adds two new features of suspense, specifically streaming HTML and selective hydration.

Streaming HTML means React will send the static pieces of UI components using suspense, which will decide which part of the component will take longer to load and what can be directly rendered. Selective hydration, ensures that components that are wrapped under suspense will not block hydration. Once the JS and content are loaded for each component it will start hydrating without blocking another component.

The React release candidate is available now.

More Information

ReactJS Site

Related Articles

New Version of React Native for Windows

React Power BI Released

React 16.5 Adds Programmatic Profiler

The Programmers Guide To React

React 16 Adds Fragments  

To be informed about new articles on I Programmer, sign up for our weekly newsletter,subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

or email your comment to: [email protected]