Element: export new React 18 APIs

WordPress · Dec 16, 2022 · bd185af · bd185af · github-actions · Dec 16, 2022
1 parent f8efb0d
commit bd185af
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 0 deletions.
diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
 
+### New Features
+
+-   Started exporting new React 18 APIs: `useSyncExternalStore`, `createRoot` and `hydrateRoot`
+
 ## 4.20.0 (2022-11-16)
 
 ## 4.19.0 (2022-11-02)

diff --git a/packages/element/README.md b/packages/element/README.md
@@ -198,6 +198,14 @@ _Returns_
 
 -   `Object`: Ref object.
 
+### createRoot
+
+Creates a new React root for the target DOM node.
+
+_Related_
+
+-   <https://reactjs.org/docs/react-dom-client.html#createroot>
+
 ### findDOMNode
 
 Finds the dom node of a React component.
@@ -234,6 +242,14 @@ _Parameters_
 -   _element_ `import('./react').WPElement`: Element to hydrate.
 -   _target_ `HTMLElement`: DOM node into which element should be hydrated.
 
+### hydrateRoot
+
+Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
+
+_Related_
+
+-   <https://reactjs.org/docs/react-dom-client.html#hydrateroot>
+
 ### isEmptyElement
 
 Checks if the provided WP element is empty.
@@ -423,6 +439,12 @@ _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#usestate>
 
+### useSyncExternalStore
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore>
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Contributing to this package

diff --git a/packages/element/src/react-platform.js b/packages/element/src/react-platform.js
@@ -8,6 +8,7 @@ import {
 	hydrate,
 	unmountComponentAtNode,
 } from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 
 /**
  * Creates a portal into which a component can be rendered.
@@ -43,6 +44,20 @@ export { render };
  */
 export { hydrate };
 
+/**
+ * Creates a new React root for the target DOM node.
+ *
+ * @see https://reactjs.org/docs/react-dom-client.html#createroot
+ */
+export { createRoot };
+
+/**
+ * Creates a new React root for the target DOM node and hydrates it with a pre-generated markup.
+ *
+ * @see https://reactjs.org/docs/react-dom-client.html#hydrateroot
+ */
+export { hydrateRoot };
+
 /**
  * Removes any mounted element from the target DOM node.
  *

diff --git a/packages/element/src/react.js b/packages/element/src/react.js
@@ -24,6 +24,7 @@ import {
 	useImperativeHandle,
 	useLayoutEffect,
 	useDebugValue,
+	useSyncExternalStore,
 	lazy,
 	Suspense,
 } from 'react';
@@ -185,6 +186,11 @@ export { useRef };
  */
 export { useState };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore
+ */
+export { useSyncExternalStore };
+
 /**
  * @see https://reactjs.org/docs/react-api.html#reactlazy
  */