Post
Ask Question

Getting Started with React 18's createRoot API

The new createRoot API provides a radical change in application rendering when it comes to React 18. This update is a part of ongoing React work to reduce the gap between what we developers code and allow DevTools to get an idea about potential problems, as well as amenable ‘correction’ space for the hotfixes. In this article, we will cover what the createRoot API is and why it matters, along with how to do that in your React application.

What is the createRoot API?

In this post, we will be using the new createRoot API to initialize and manage your React application's root. It replaces ReactDOM, which was nothing but an older version of this when the browser was not being supported. The render method provides us with the benefits of powerful and more flexible rendering facilities. createRoot is carefully designed to integrate nicely with React's Concurrent Rendering features, resulting in smoother updates and more performance benefits.

Key features of creating root

  • Works with Concurrent Mode: createRoot can be used to leverage the Concurrent Rendering features provided by React 18, which could improve how your app feels and performs.
  • createRoot makes React able to batch state updates better, which reduces rerenders and creates cleaner and more efficient code.
  • ​More and Better Support for Suspense: This new API improves the way that suspense works —especially as it concerns loading states, asynchronous rendering, etc.

How to use createRoot?

Basic Setup

createRoot, you will need to upgrade your application to React 18 first before leveraging it. Ensure that the most recent versions of react and react-dom are in Installed dependencies.

npm install react@latest react-dom@latest

The root API can be created in traditional React Application usage like this.

Step 1. Import createRoot.

import { createRoot } from 'react-dom/client';

As I mentioned above, this code will be extended based on the React boilerplate, starting with Create an Entry Point. /App';

Step 2. Create a Root.

Replace ReactDOM. Render with createRoot to bootstrap the "root" of your application. For example, how can you set it up as here?

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

// Render your application
root.render(
  <StoreProvider>
    {/* Your app components go here */}
  </StoreProvider>
);

Step 3. Update Components.

You do not have to change anything in the components to use createRoot. But now you can leverage new benefits such as Concurrent Rendering and automatic batching. So make sure to optimize your components for these features, like using Suspense for code splitting and lazy loading.​

Benefits of using createRoot 

  • Improved Performance: This API is createRoot, which will optimize for faster rendering, so response time in your application context will be much greater. In this way, React can pause and resume rendering work, which effectively makes your app more perceptually responsive without adversely affecting the web experience of any transparency in movements while at the same time being closer to a fully-fledged concurrent rendering.
  • Smoother User Experience: Automatically batching createRoot should also make Suspense a smoother experience. It takes care of the state updates so well that they never flicker nor lag behind, and more importantly, it's a better way to handle Asynchronous operations.
  • Future-Proofing Your App: One of the reasons you would likely want to start using createRoot in your app is because it’s more future-proof, a.k.a. adopting this method helps get your application ready for updates/changes React may implement down the line. React is continually enhancing, so using new APIs will ensure that your app plays well with the latest paradigms and conventions.

Conclusion

React 18 Creation API for creating root — a nice step rendering technology that allows you to use Concurrent Rendering, automatic batching, and better support for Suspense. It is an easy step toward creating root but can have a large impact on performance and user experience. In addition, this leaves you ready to adopt future React enhancements and assist in the development of improved user experiences because the standard ways data was shared continue to change.


Similar Articles