The React community eagerly awaits each new version of the React library, which is the most commonly used web framework these days. In the last year, it has even overtaken jQuery, which has been the king of web libraries for many years, according to the latest Stack Overflow survey. It also earned the title of best UI framework and took the fourth position in the Most Popular Projects section in the JavaScript Rising Stars ranking by bestofjs.

The preview version, 17, didn’t bring any new groundbreaking features, compared to other React versions. Instead, it focused on ensuring that updating goes as smoothly as possible in addition to improving the basics. We got a bug fix for a false positive warning when dangerouslySetInnerHTML is undefined (#18676), the unnecessary internals for React Native Web are no longer exposed (#18483), calling ReactDOM.flushSync during lifecycle methods became possible (#18759), and many others.

The expectations are extremely high for React latest version. The upcoming release is already in the release candidate stage, so let’s take a look at the fresh functionalities that will soon be introduced — like new APIs, concurrent mode, or enhanced server–side rendering.

Let’s see what awaits React developers.

React 18 adds many new features that use concurrent rendering under the hood. This new fantastic feature was announced about half a year ago, and now it’s in its second stage of support, which means it’s working, but still needs some improvements. Why is it important? Because it’s the core mechanism of many new features, like automatic batching, new Suspense API for side-server rendering, startTransition API, and more.

The biggest challenge in implementing concurrent mode is tearing — an inconsistency in the user interface which can happen due to multithreading. Because React handles many updates at once, you can witness two different values for the same data on the page. So, for example, if a user clicks quickly and several times on a UI element that affects the price (let it be a button that changes the value between net and gross price), they may see different versions. Why does it happen, exactly?

The user clicks on the button,
React starts the re–rendering process and renders the price component,
The impatient user clicks on the button again,
React pauses the rendering immediately to handle the new action in order to show off its responsiveness,
The price changes and React goes back to handling the first rendering process,