React-17 vs React-18 Root Render Changes
Tags: react
Published: 2023-01-02 04:48:01

---
title: React-17 vs React-18 Root Render Changes
published: true
description: React Root Component Render Changes in React-18
tags: #react 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

## React-17 vs React-18 Root Render Changes.

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.

As react can be added to any javascript based application. I have created two vanilla html files

### React-17.html & React-18.html

For understanding purposes I am using development cdn version from ### unpkg

Up to React-17 we use the ReactDOM.render() method to directly render the components by using ReactDOM.render() method.

```
ReactDOM.render(
React.createElement(<Your App or Root Component>),
document.getElementById("root")
);
```

ReactDOM takes the component and renders it to the target div on the page in this case "root" as created in `React-17.html`

However in React-18 ReactDOM.render api is no longer available and in order to Render a component using react we have to use the render method of createRoot() method to render Component

In order to use createRoot.render method we first need to pass our target "div / container" to the createRoot method of ReactDOM as done in `React-18.html`

```
const container = document.getElementById("root");
```

We are getting the target div by using javascript DOM method.

we'll pass the target element to the createRoot() method

```
const root = ReactDOM.createRoot(container);
```

you can use any variable names for root or container.

This will create a root or parent container where the react elements will be rendered. In order to render our root component pass it to the render() method of root by using React.createElement()

```
root.render(React.createElement(<Your App or Root Component>));
```

These changes are already part of updated create-react-app. This is repo is just for understanding purposes on how the React.18 has changed the root rendering for the app.

For a quick overview here is the difference in terms of just the raw javascript codes

## React-17

```
<script>
      const App = () => {
        return React.createElement("div", {}, [
          React.createElement(
            "h1",
            { className: "title", key: "title" },
            "React <App/> is Rendered"
          )
        ]);
      };
      ReactDOM.render(
        React.createElement(App),
        document.getElementById("root")
      );
</script>
```

## React-18

```
<script>
      const App = () => {
        return React.createElement("div", {}, [
          React.createElement(
            "h1",
            { className: "title", key: "title" },
            "React <App/> is Rendered"
          )
        ]);
      };
      const container = document.getElementById("root");
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));
</script>
```

The complete html files are listed below for reference. 
## React-17.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">React App is not Rendered</div>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script>
      const App = () => {
        return React.createElement("div", {}, [
          React.createElement(
            "h1",
            { className: "title", key: "title" },
            "React <App/> is Rendered"
          )
        ]);
      };
      ReactDOM.render(
        React.createElement(App),
        document.getElementById("root")
      );
    </script>
  </body>
</html>
```

## React-18.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">React App is not Rendered</div>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script>
      const App = () => {
        return React.createElement("div", {}, [
          React.createElement(
            "h1",
            { className: "title", key: "title" },
            "React <App/> is Rendered"
          )
        ]);
      };
      const container = document.getElementById("root");
      const root = ReactDOM.createRoot(container);
      root.render(React.createElement(App));
    </script>
  </body>
</html>
```

For more details please check: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis