React 18: From A Developer’s PoV

React 18, the much-awaited version of React is out with exciting features like automatic batching, a new API –startTransition, and streaming server-side rendering with support for Suspense. What’s so special about this newer version is its unique “concurrent rendering” method. In the earlier versions of React, the rendering process was synchronous and non-interruptible where the UI would lock during long render processes and not respond to user input instantly. Using React 18, the rendering process can be made asynchronous and can be interrupted, paused, resumed, and even abandoned enabling developers to create a more fluid user experience.

How to update from React 17 to React 18?

React 18 is currently released in alpha and can be downloaded using the command 

A component is usually rendered like this

However, to utilize the latest features, components need to be rendered like this:

What’s there in React 18?

Automatic Batching

Automatic Batching is the rendering that occurs at the same time whenever triggered to update with multiple states at once. The previous version of React could only batch updates inside React event handlers. If the multiple state updates are triggered by a promise or a callback, their responses are not rendered at the same time. But with React 18, all renders are batched, meaning they’ll occur at the same time, regardless of their trigger.

Here’s an example with a promise:

Suspense

With Suspense, React 18 makes major performance improvements to SSR by making serving parts of an app asynchronously possible. Suspense helps in specifying what React should show when a part of the tree isn’t ready to render. For instance, in case there are four components: a Header, a Sidebar, a Banner component, and the Main component. If all four of them are stacked on each other like this 

Then, the server would try to render them at once, slowing the entire page down. If the Header, the Sidebar, and the Main are more important for the readers, one can prioritize these over the Banner by wrapping the Banner component in Suspense tags:

As a result, the server would first serve the Header, Side Bar, and Main component, and then a spinner would be displayed while the Banner waits to load.

Transitions

React apps are interactive, however, to make an app update itself as people interact with it, constant updating might cause the app to slow down significantly and give a poor user experience. Transition is a new React feature that differentiates between urgent and non-urgent updates. Transition updates transform the UI from one view to the next.

• Urgent updates are the direct interactions like typing, clicking, pressing, etc., that need immediate response to match one’s intuition about how physical objects behave. Otherwise, they feel “wrong”. However, transitions are different because the user doesn’t expect to see every intermediate value on the screen. 

Single-user input should typically result in both an urgent and a non-urgent update for the best user experience. StartTransition API can be used inside an input event to tell React which updates are urgent and which are “transitions”.

• Non-urgent updates are wrapped in ‘startTransition’ and would get interrupted if more urgent updates, such as clicks or keypresses, emerge. If a user interrupts a transition (for example, by typing multiple characters in a row), React will discard any stale rendering work and render only the most recent update.

New Hooks

1. UseId

useId is a new hook for creating unique IDs on both the client and the server while avoiding hydration mismatches. It’s most beneficial for component libraries that need to integrate with accessibility APIs that require unique IDs. This addresses a major problem that existed in React 17 and in its previous versions, but it’s even more critical in React 18 because of how the new streaming server renderer delivers HTML out-of-order.

2. useTransition

‘useTransition’ and ‘startTransition’ would allow marking some state updates as not urgent. By default, other state updates are considered urgent. React would allow urgent state updates (for example, updating a text input) to interrupt the non-urgent state updates (for example, count results).

3. useSyncExternalStore

‘useSyncExternalStore’ is a new hook that enables external stores to support concurrent reads by forcing updates to the store to be synchronous. It eliminates the necessity for useEffect when implementing subscriptions to external data sources, and is recommended for any library that integrates with a state external to React.

4. useDeferredValue

‘useDeferredValue’ helps to delay re-rendering a non-urgent part of the tree. It works in the same way as debouncing, although it offers a few advantages. React will attempt the deferred render directly after the initial render is reflected on the screen because there is no predetermined time delay. The deferred render is interruptible and doesn’t block user input.

5. useInsertionEffect

‘useInsertionEffect’ is a new hook that allows CSS-in-JS libraries to address the performance difficulties of injecting styles in the render. Unless you’ve already built a CSS-in-JS library we don’t expect you to ever use this. This hook will activate after the DOM is mutated, but before layout effects read the new layout. useInsertionEffect is even more important in React 18 because React yields to the browser during concurrent rendering, giving it a chance to recalculate the layout.

Conclusion

With the introduction of React 18, there has been a drastic change in the world of web applications because of its unique offerings like concurrent mode and server-side rendering. The latest feature would make it easier to develop and maintain a code as well as make apps faster and more responsive to user interactions.

About the author:

Manikandan is a Technical Lead at Mantra Labs working on React/Angular-related projects. He is interested in learning about stock analyst trading algorithms, and in his free time, he loves to swim, cook, and play cricket and chess.