diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md index efb51cc2dca06..78329b5047949 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 ([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 index 8a3e39dc50a1f..60a64113bca7e 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. @@ -332,6 +348,12 @@ _Returns_ - `string`: Serialized element. +### startTransition + +_Related_ + +- + ### StrictMode Component that activates additional checks and warnings for its descendants. @@ -381,18 +403,36 @@ _Related_ - +### useDeferredValue + +_Related_ + +- + ### useEffect _Related_ - +### useId + +_Related_ + +- + ### useImperativeHandle _Related_ - +### useInsertionEffect + +_Related_ + +- + ### useLayoutEffect _Related_ @@ -423,6 +463,18 @@ _Related_ - +### useSyncExternalStore + +_Related_ + +- + +### useTransition + +_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..4f2b8e150303e 100644 --- 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 */