Use React 18 createRoot API

This breaks compatibility with React <18, but eliminates noisy console warnings in projects that have upgraded to React 18.
cultureamp · Aug 17, 2023 · 8854b30 · 8854b30
1 parent 6ab229b
commit 8854b30
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/.changeset/perfect-ties-tell.md b/.changeset/perfect-ties-tell.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/notification": major
+---
+
+Upgrade to React 18 render API
diff --git a/packages/notification/package.json b/packages/notification/package.json
@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "@kaizen/design-tokens": "^2.10.3 || ^3.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }
diff --git a/packages/notification/src/ToastNotificationManager.tsx b/packages/notification/src/ToastNotificationManager.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import ReactDOM from "react-dom"
+import { createRoot } from "react-dom/client"
 import { v4 } from "uuid"
 import { ToastNotificationsListContainer } from "./ToastNotificationsList"
 import {
@@ -109,13 +109,11 @@ const createToastNotificationManager = (): ToastNotificationApi => {
   }
 
   if (portal) {
-    // eslint-disable-next-line react/no-deprecated
-    ReactDOM.render(
+    createRoot(portal).render(
       <ToastNotificationsListContainer
         removeToastNotification={removeToastNotification}
         registerSetNotificationsCallback={registerSetNotificationsCallback}
-      />,
-      portal
+      />
     )
   }