Make the AsyncModeProvider API a stable API (#18154)

packages/block-editor/src/components/block-list/block-async-mode-provider.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalAsyncModeProvider as AsyncModeProvider,
-	useSelect,
-} from '@wordpress/data';
+import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
 const BlockAsyncModeProvider = ( { children, clientId, isBlockInSelection } ) => {
 	const isParentOfSelectedBlock = useSelect( ( select ) => {

packages/block-editor/src/components/block-list/index.js

@@ -17,7 +17,7 @@ import { Component } from '@wordpress/element';
 import {
 	withSelect,
 	withDispatch,
-	__experimentalAsyncModeProvider as AsyncModeProvider,
+	AsyncModeProvider,
 } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 

packages/data/README.md

@@ -251,6 +251,46 @@ Specific implementation differences from Redux and React Redux:
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+<a name="AsyncModeProvider" href="#AsyncModeProvider">#</a> **AsyncModeProvider**
+
+Context Provider Component used to switch the data module component rerendering
+between Sync and Async modes.
+
+_Usage_
+
+```js
+import { useSelect, AsyncModeProvider } from '@wordpress/data';
+
+function BlockCount() {
+  const count = useSelect( ( select ) => {
+    return select( 'core/block-editor' ).getBlockCount()
+  } );
+
+  return count;
+}
+
+function App() {
+  return (
+    <AsyncModeProvider value={ true }>
+      <BlockCount />
+    </AsyncModeProvider>
+  );
+}
+```
+
+In this example, the BlockCount component is rerendered asynchronously.
+It means if a more critical task is being performed (like typing in an input),
+the rerendering is delayed until the browser becomes IDLE.
+It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.
+
+_Parameters_
+
+-   _props.value_ `boolean`: Enable Async Mode.
+
+_Returns_
+
+-   `WPComponent`: The component to be rendered.
+
 <a name="combineReducers" href="#combineReducers">#</a> **combineReducers**
 
 The combineReducers helper function turns an object whose values are different

packages/data/src/components/async-mode-provider/context.js

@@ -9,4 +9,38 @@ const { Consumer, Provider } = Context;
 
 export const AsyncModeConsumer = Consumer;
 
+/**
+ * Context Provider Component used to switch the data module component rerendering
+ * between Sync and Async modes.
+ *
+ * @example
+ *
+ * ```js
+ * import { useSelect, AsyncModeProvider } from '@wordpress/data';
+ *
+ * function BlockCount() {
+ *   const count = useSelect( ( select ) => {
+ *     return select( 'core/block-editor' ).getBlockCount()
+ *   } );
+ *
+ *   return count;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <AsyncModeProvider value={ true }>
+ *       <BlockCount />
+ *     </AsyncModeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * In this example, the BlockCount component is rerendered asynchronously.
+ * It means if a more critical task is being performed (like typing in an input),
+ * the rerendering is delayed until the browser becomes IDLE.
+ * It is possible to nest multiple levels of AsyncModeProvider to fine-tune the rendering behavior.
+ *
+ * @param {boolean}   props.value  Enable Async Mode.
+ * @return {WPComponent} The component to be rendered.
+ */
 export default Provider;

packages/data/src/index.js

@@ -19,9 +19,7 @@ export {
 } from './components/registry-provider';
 export { default as useSelect } from './components/use-select';
 export { useDispatch } from './components/use-dispatch';
-export {
-	AsyncModeProvider as __experimentalAsyncModeProvider,
-} from './components/async-mode-provider';
+export { AsyncModeProvider } from './components/async-mode-provider';
 export { createRegistry } from './registry';
 export { createRegistrySelector, createRegistryControl } from './factory';