Block Editor: Add hook: useNoRecursiveRenders

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

@@ -121,6 +121,7 @@ export { default as WritingFlow } from './writing-flow';
 export { useCanvasClickRedirect as __unstableUseCanvasClickRedirect } from './use-canvas-click-redirect';
 export { default as useBlockDisplayInformation } from './use-block-display-information';
 export { default as __unstableIframe } from './iframe';
+export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursive-renders';
 
 /*
  * State Related Components

packages/block-editor/src/components/use-no-recursive-renders/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useMemo,
+} from '@wordpress/element';
+
+const RenderedRefsContext = createContext( new Set() );
+
+// Immutably add to a Set
+function add( set, element ) {
+	const result = new Set( set );
+	result.add( element );
+	return result;
+}
+
+export default function useNoRecursiveRenders( uniqueId ) {
+	const previouslyRenderedBlocks = useContext( RenderedRefsContext );
+	const hasAlreadyRendered = previouslyRenderedBlocks.has( uniqueId );
+	const newRenderedBlocks = useMemo(
+		() => add( previouslyRenderedBlocks, uniqueId ),
+		[ uniqueId, previouslyRenderedBlocks ]
+	);
+	const Provider = useCallback(
+		( { children } ) => (
+			<RenderedRefsContext.Provider value={ newRenderedBlocks }>
+				{ children }
+			</RenderedRefsContext.Provider>
+		),
+		[ newRenderedBlocks ]
+	);
+	return [ hasAlreadyRendered, Provider ];
+}

packages/block-library/src/block/test/use-no-recursive-renders.js → packages/block-editor/src/components/use-no-recursive-renders/test/use-no-recursive-renders.js

@@ -7,6 +7,7 @@ import { render } from '@testing-library/react';
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
+import { __experimentalUseNoRecursiveRenders as useNoRecursiveRenders } from '@wordpress/block-editor';
 
 // Mimics a block's Edit component, such as ReusableBlockEdit, which is capable
 // of calling itself depending on its `ref` attribute.
@@ -37,11 +38,6 @@ function Edit( { attributes: { ref } } ) {
 	);
 }
 
-/**
- * Internal dependencies
- */
-import useNoRecursiveRenders from '../use-no-recursive-renders';
-
 describe( 'useNoRecursiveRenders', () => {
 	it( 'allows a single block to render', () => {
 		const { container } = render(

packages/block-library/src/block/edit.js

@@ -18,6 +18,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	InnerBlocks,
 	BlockControls,
 	InspectorControls,
@@ -26,11 +27,6 @@ import {
 } from '@wordpress/block-editor';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 
-/**
- * Internal dependencies
- */
-import useNoRecursiveRenders from './use-no-recursive-renders';
-
 export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
 		ref