React v18.0 – finally is of legal age?

It’s almost a month after official presentation on npm, so it’s we’re ready to roll with our remarks on the latest React version. As you know, CoreUI Admin Panel is not another blend of 3rd parties’ free components and libraries. It’s the only Open-Source React Admin Dashboard Template built on the enterprise-grade hand-crafted React UI Components Library. That’s why we’ve waited patiently for React v18.0, to materialize it e.g. here https://coreui.io/react/.

React v18.0 brings a lot of new features like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense. But we cannot forget about other features which will have a big impact on the way people build applications.

Concurrent React

As we can find in the documentation, React 18 brings a new concurrency model. To provide concurrency React uses cooperative multitasking, priority-based rendering, scheduling, and interruptions. Also, tasks can now overlap.

So in the context of React.js, concurrency refers to having more than one task in progress at once, and concurrent tasks can overlap depending on which is more urgent. As we all know React could only handle one task at a time in the past, and a task could not be interrupted once it had started. So, we had an option in v17 to overcome it with Concurrent Mode, which was introduced as an experimental feature. Concurrent Mode is now being replaced in React 18 with concurrent features. One of them is concurrent rendering, that describes how the new features (concurrent features) included in React 18 are implemented. Features built to take advantage of concurrent rendering include suspense, transitions, and streaming server rendering. So it seems that concurrent rendering is a breaking change, would you agree?

Automatic Batching

Thanks to the automatic batching, React team removed the need to manually batch updates in application or library code. Batching is when React groups multiple state updates into a single re-render for better performance, so fewer renders are needed. React v18 ensures that state updates invoked from any location will be batched by default. This will batch e.g. state updates, including native event handlers, asynchronous operations, timeouts, and intervals.

What’s also amazing in this feature is that automatic batching can be easily… stopped.  We all know that there can be situations where we need to prevent our design from automatic batching. For that, React provides a method named flushSync() in react-dom that allows us to trigger a re-render for a specific state update.

Transitions

React v18 introduced a new hook called useTransition. According to the documentation, useTransition returns a stateful value for the pending state of the transition, and a function to start it. These transitions are user interface (UI) updates but are not animations. So, they have nothing to do with CSS transitions.

Transition seems to be a fresh concept to differ between urgent and non-urgent updates. More power to the people?! Yes! Cause now we can set priorities to updates we expect our users will interact more or less. Clicking, typing, pressing are just few examples of urgent updates, that need immediate response. Sounds good for UI.

New Suspense

Concurrent rendering is a powerful new tool in React and most of our new features are built to take advantage of it, including Suspense, transitions, and streaming server rendering. In React 18, we can start using Suspense for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. As React Team suggests ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy.

There are few other options, but suspense works best when it’s deeply integrated into our application’s architecture: our router, our data layer, and our server rendering environment. And here comes best (not only from CoreUI’s Team point of view) – “we expect that libraries and frameworks will play a crucial role in the React ecosystem”. Have you seen our React library? ;) https://coreui.io/react/

5 New Hooks

Along with v18 React, several handy hooks have been introduced:

• useTransition
• useDeferredValue
• useId
• useSyncExternalStore
• useInsertionEffect

useTransition we’ve covered earlier, so let’s check others. useDeferredValue lets us defer re-rendering a non-urgent part of the tree. Hey, that sounds similar to debouncing?! You’re right my dear! But it has a few advantages compared to it. Like e.g. there is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. As we can find in official React v18 docs https://reactjs.org/blog/2022/03/29/react-v18.html#usedeferredvalue - the deferred render is interruptible and doesn’t block user input. useID is a handy hook, which you probably compared to the known uuid to generate uniqueid for identifying nodes or something else before. Simple, but easy. We like it. useSyncExternalStore is a hook recommended for reading and subscribing from external data sources that accepts three arguments: subscribe, getSnapshot, getServerSnapshot. Last but not least is useInsertionEffect, which is intended for CSS-in-JS libraries, such as styled components. It’s worth to mention that this hook does not have access to refs and cannot schedule updates.

Conclusion

We like it! React has given us new power. Especially that it brought to life what we’ve been doing for a long time: https://coreui.io/react/docs/getting-started/introduction/ Time is our most valuable asset, that’s why we want to help you save it by creating simple, customizable, easy to learn React.js UI components and React.js Admin Templates which significantly cut development time. Thanks to React v18 we’re ready to roll!