diff --git a/packages/block-editor/src/components/block-list/block-async-mode-provider.js b/packages/block-editor/src/components/block-list/block-async-mode-provider.js
index aaa2e709db92c6..3cdde80050761c 100644
--- a/packages/block-editor/src/components/block-list/block-async-mode-provider.js
+++ b/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 ) => {
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index b6af745716b289..54511ac941ecc4 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/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';
diff --git a/packages/data/README.md b/packages/data/README.md
index ca3c5fcab29bba..68dc1a48e1697a 100644
--- a/packages/data/README.md
+++ b/packages/data/README.md
@@ -251,6 +251,46 @@ Specific implementation differences from Redux and React Redux:
+# **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 (
+
+
+
+ );
+}
+```
+
+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.
+
# **combineReducers**
The combineReducers helper function turns an object whose values are different
diff --git a/packages/data/src/components/async-mode-provider/context.js b/packages/data/src/components/async-mode-provider/context.js
index c0e59ef7138183..88c98cb260b4a0 100644
--- a/packages/data/src/components/async-mode-provider/context.js
+++ b/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 (
+ *
+ *
+ *
+ * );
+ * }
+ * ```
+ *
+ * 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;
diff --git a/packages/data/src/index.js b/packages/data/src/index.js
index 8dd6893c5d9e01..c7ad8f67a7484d 100644
--- a/packages/data/src/index.js
+++ b/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';