useNestedSettingsUpdate: revert deoptimization of the updateBlockList…

…Settings actions" (#46350)

packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -13,6 +13,8 @@ import { getLayoutType } from '../../layouts';
 
 /** @typedef {import('../../selectors').WPDirectInsertBlock } WPDirectInsertBlock */
 
+const pendingSettingsUpdates = new WeakMap();
+
 /**
  * This hook is a side effect which updates the block-editor store when changes
  * happen to inner block settings. The given props are transformed into a
@@ -46,6 +48,8 @@ export default function useNestedSettingsUpdate(
 	layout
 ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
+	const registry = useRegistry();
+
 	const { blockListSettings, parentLock } = useSelect(
 		( select ) => {
 			const rootClientId =
@@ -97,7 +101,30 @@ export default function useNestedSettingsUpdate(
 		}
 
 		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
-			updateBlockListSettings( clientId, newSettings );
+			// Batch updates to block list settings to avoid triggering cascading renders
+			// for each container block included in a tree and optimize initial render.
+			// To avoid triggering updateBlockListSettings for each container block
+			// causing X re-renderings for X container blocks,
+			// we batch all the updatedBlockListSettings in a single "data" batch
+			// which results in a single re-render.
+			if ( ! pendingSettingsUpdates.get( registry ) ) {
+				pendingSettingsUpdates.set( registry, [] );
+			}
+			pendingSettingsUpdates
+				.get( registry )
+				.push( [ clientId, newSettings ] );
+			window.queueMicrotask( () => {
+				if ( pendingSettingsUpdates.get( registry )?.length ) {
+					registry.batch( () => {
+						pendingSettingsUpdates
+							.get( registry )
+							.forEach( ( args ) => {
+								updateBlockListSettings( ...args );
+							} );
+						pendingSettingsUpdates.set( registry, [] );
+					} );
+				}
+			} );
 		}
 	}, [
 		clientId,
@@ -111,5 +138,6 @@ export default function useNestedSettingsUpdate(
 		orientation,
 		updateBlockListSettings,
 		layout,
+		registry,
 	] );
 }