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
Top comments (0)