Use React v18 createRoot instead of render

opensafely-core · Jan 31, 2024 · 1425ba2 · 1425ba2
1 parent ac62749
commit 1425ba2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/static/src/js/builder/index.jsx b/static/src/js/builder/index.jsx
@@ -1,6 +1,6 @@
 "use strict";
 
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import React from "react";
 
 import CodelistBuilder from "./codelistbuilder";
@@ -25,7 +25,9 @@ const visiblePaths = hierarchy.initiallyVisiblePaths(
   1,
 );
 
-ReactDOM.render(
+const container = document.getElementById("codelist-builder-container");
+const root = createRoot(container);
+root.render(
   <CodelistBuilder
     resultsHeading={readValueFromPage("results-heading")}
     searches={readValueFromPage("searches")}
@@ -45,5 +47,4 @@ ReactDOM.render(
     versions={readValueFromPage("versions")}
     metadata={readValueFromPage("metadata")}
   />,
-  document.querySelector("#codelist-builder-container"),
 );
diff --git a/static/src/js/tree/index.jsx b/static/src/js/tree/index.jsx
@@ -1,6 +1,6 @@
 "use strict";
 
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import React from "react";
 
 import Hierarchy from "../hierarchy";
@@ -25,7 +25,9 @@ const visiblePaths = hierarchy.initiallyVisiblePaths(
   0,
 );
 
-ReactDOM.render(
+const container = document.getElementById("codelist-tree");
+const root = createRoot(container);
+root.render(
   <TreeTables
     hierarchy={hierarchy}
     treeTables={treeTables}
@@ -35,5 +37,4 @@ ReactDOM.render(
     updateStatus={null}
     showMoreInfoModal={null}
   />,
-  document.querySelector("#codelist-tree"),
 );