DEV Community

Cover image for New root API in React 18
Coding Jitsu
Coding Jitsu

Posted on

New root API in React 18

#react #webdev #javascript #programming

New root API in React 18

React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.

ReactDOM.createRoot
Enter fullscreen mode Exit fullscreen mode

Let's take a look at how things are before using root API.
If you look at your index.js. we render our App component into the root element on the page.

import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render( <StrictMode><App /></StrictMode> );
Enter fullscreen mode Exit fullscreen mode

This API (now call "legacy root API) has some issues when running updates. We will have to pass the **rootElement **into the render every time, even if it does not change.

To fix this issue and bring some other improvements, React 18 introduced a new root API.

React 18 Root API

With this new API we don't have to pass the **rootElement **into the render.

import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> );
Enter fullscreen mode Exit fullscreen mode

Callback and Hydrate functions

This new root API removed the callback from render, since it usually does not have the expected result when using Suspense:

// Before const container = document.getElementById('app'); render(<App tab="home" />, container, () => { console.log('rendered'); }); // After function AppWithCallbackAfterRender() { useEffect(() => { console.log('rendered'); }); return <App tab="home" /> } const container = document.getElementById('app'); const root = createRoot(container); root.render(<AppWithCallbackAfterRender />);
Enter fullscreen mode Exit fullscreen mode

Finally, if your app uses server-side rendering with hydration, upgrade hydrate to hydrateRoot:

// Before import { hydrate } from 'react-dom'; const container = document.getElementById('app'); hydrate(<App tab="home" />, container); // After import { hydrateRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = hydrateRoot(container, <App tab="home" />); // Unlike with createRoot, you don't need a separate root.render() call here.
Enter fullscreen mode Exit fullscreen mode

When you first install React 18, you will see a warning in the console:

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
Enter fullscreen mode Exit fullscreen mode

Source: reactjs.org

Top comments (0)