From 403d78ae22ff81c4230cea8aeb19a5d831e622e8 Mon Sep 17 00:00:00 2001
From: Akeda Bagus <akeda.bagus@automattic.com>
Date: Tue, 20 Aug 2024 11:50:26 +0700
Subject: [PATCH] Fix wcadmin-product-usage-notice-modal react18 createroot
 (#50765)

---
 .../wp-admin-scripts/woo-product-usage-notice/index.js     | 7 +++----
 .../fix-wcadmin-react18-product-usage-notice-modal         | 4 ++++
 2 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-wcadmin-react18-product-usage-notice-modal

diff --git a/plugins/woocommerce-admin/client/wp-admin-scripts/woo-product-usage-notice/index.js b/plugins/woocommerce-admin/client/wp-admin-scripts/woo-product-usage-notice/index.js
index dc4e0670e88..ccaab793a41 100644
--- a/plugins/woocommerce-admin/client/wp-admin-scripts/woo-product-usage-notice/index.js
+++ b/plugins/woocommerce-admin/client/wp-admin-scripts/woo-product-usage-notice/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,7 +27,7 @@ const {
 const container = document.createElement( 'div' );
 container.setAttribute( 'id', 'woo-product-usage-notice' );
 
-render(
+createRoot( document.body.appendChild( container ) ).render(
 	<ProductUsageNoticeModal
 		renewUrl={ renewUrl }
 		subscribeUrl={ subscribeUrl }
@@ -41,6 +41,5 @@ render(
 		colorScheme={ colorScheme }
 		subscriptionState={ subscriptionState }
 		screenId={ screenId }
-	/>,
-	document.body.appendChild( container )
+	/>
 );
diff --git a/plugins/woocommerce/changelog/fix-wcadmin-react18-product-usage-notice-modal b/plugins/woocommerce/changelog/fix-wcadmin-react18-product-usage-notice-modal
new file mode 100644
index 00000000000..60ecc7ee16f
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-wcadmin-react18-product-usage-notice-modal
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Changed from using React.render to React.createRoot for product-usage-notice-modal as it has been deprecated since React 18