Element: export new React 18 APIs (#46610)

* Element: export new React 18 APIs * Export more APIs
WordPress · Dec 16, 2022 · 8690500 · 8690500 · github-actions · Dec 16, 2022
1 parent 9258e2d
commit 8690500
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 6 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 ([46610](https://github.com/WordPress/gutenberg/pull/46610))
+
 ## 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.
@@ -332,6 +348,12 @@ _Returns_
 
 -   `string`: Serialized element.
 
+### startTransition
+
+_Related_
+
+-   <https://reactjs.org/docs/react-api.html#starttransition>
+
 ### StrictMode
 
 Component that activates additional checks and warnings for its descendants.
@@ -381,18 +403,36 @@ _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#usedebugvalue>
 
+### useDeferredValue
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usedeferredvalue>
+
 ### useEffect
 
 _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#useeffect>
 
+### useId
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#useid>
+
 ### useImperativeHandle
 
 _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#useimperativehandle>
 
+### useInsertionEffect
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#useinsertioneffect>
+
 ### useLayoutEffect
 
 _Related_
@@ -423,6 +463,18 @@ _Related_
 
 -   <https://reactjs.org/docs/hooks-reference.html#usestate>
 
+### useSyncExternalStore
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore>
+
+### useTransition
+
+_Related_
+
+-   <https://reactjs.org/docs/hooks-reference.html#usetransition>
+
 <!-- 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
@@ -14,16 +14,22 @@ import {
 	isValidElement,
 	memo,
 	StrictMode,
-	useState,
-	useEffect,
-	useContext,
-	useReducer,
 	useCallback,
+	useContext,
+	useDebugValue,
+	useDeferredValue,
+	useEffect,
+	useId,
 	useMemo,
-	useRef,
 	useImperativeHandle,
+	useInsertionEffect,
 	useLayoutEffect,
-	useDebugValue,
+	useReducer,
+	useRef,
+	useState,
+	useSyncExternalStore,
+	useTransition,
+	startTransition,
 	lazy,
 	Suspense,
 } from 'react';
@@ -150,16 +156,31 @@ export { useContext };
  */
 export { useDebugValue };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usedeferredvalue
+ */
+export { useDeferredValue };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#useeffect
  */
 export { useEffect };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#useid
+ */
+export { useId };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle
  */
 export { useImperativeHandle };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#useinsertioneffect
+ */
+export { useInsertionEffect };
+
 /**
  * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect
  */
@@ -185,6 +206,21 @@ export { useRef };
  */
 export { useState };
 
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore
+ */
+export { useSyncExternalStore };
+
+/**
+ * @see https://reactjs.org/docs/hooks-reference.html#usetransition
+ */
+export { useTransition };
+
+/**
+ * @see https://reactjs.org/docs/react-api.html#starttransition
+ */
+export { startTransition };
+
 /**
  * @see https://reactjs.org/docs/react-api.html#reactlazy
  */