taiseen

May 05, 2022

React Latest Version

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 . It also earned the title of best UI framework and took the fourth position in the Most Popular Projects section in the . 

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 (), the unnecessary internals for React Native Web are no longer exposed (), calling ReactDOM.flushSync during lifecycle methods became possible (), and .

The expectations are extremely high for 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 — 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 example above illustrates the amount of work and all the problems that had to be solved to make concurrent mode stable and reliable. This is a major step forward setting the direction for web development for the near future.

It’s probably the most exciting change in the React library since the introduction of React Hooks. useSyncExternalStore hook is the result of long and hard work on useMutableSource, but the name had to be altered due to a complete change in the implementation approach in response to encountered problems. Once it will be deployed with React 18, the devs will no longer have to remember to memoize selectors related to the stores. Let’s take a look at this feature in action