Version 18 of React has come out with never-before-seen features.
React 18 launched with remarkable out-of-box improvements such as new startTransition APIs, automatic batching, and server-side rendering (SSR) with Suspense.
The features rest on new opt-in concurrent renderers, enabled when users employ concurrent features. Concurrency allows React to prep several UI versions simultaneously and utilizes advanced techniques like multiple buffering and priority queues in internal implementation.
“When we design APIs, we try to hide implementation details from developers. As a React developer, you focus on what you want the user experience to look like, and React handles how to deliver that experience. So we don’t expect React developers to know how concurrency works under the hood,” the React team wrote in a blog post. “However, Concurrent React is more important than a typical implementation detail — it’s a foundational update to React’s core rendering model. So while it’s not super important to know how concurrency works, it may be worth knowing what it is at a high level.”
About the rendering feature
Though there are several features, the main one is that rendering becomes interruptible. For instance, when it renders an upgrade/update, it might pause in-between, continue after that, and even quit in-progress render.
React ensures that UI will emerge ‘consistent’ even if the render gets interrupted. It will prep new screens without obstructing the primary thread, meaning that UI could respond to user inputs immediately, even when rendering large tasks.
It can easily remove portions of UI from a screen and add them later when reusing the past states with a reusable state.
They further said it offered new APIs so libraries can benefit from concurrent features, hoping developers will include concurrency to apps by utilizing a concurrent-enabled framework or library.
Automatic-batching
In addition to that, they’ve introduced automatic batching. This feature functions when React bands several state upgrades in a single rerender for optimal performance. Moreover, the transition feature differentiates between non-urgent and urgent updates.
React also works on developing features like “Server Components,” allowing developers to create applications that span clients and servers to merge client-side app interactivities with enhanced performance of conventional server rendering.
13 hours ago
