diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md index efb51cc2dca06..620c2cd6274a1 100644 --- 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 index 8a3e39dc50a1f..ecc6b19ddcec1 100755 --- 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_ + +- + ### 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_ + +- + ### isEmptyElement Checks if the provided WP element is empty. @@ -423,6 +439,12 @@ _Related_ - +### useSyncExternalStore + +_Related_ + +- + ## Contributing to this package diff --git a/packages/element/src/react-platform.js b/packages/element/src/react-platform.js index 7b35ea8d2a2d5..c819565b79553 100644 --- 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 index 292f18cc92c62..89d80239a34fb 100644 --- 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 */