From ad6f5538f7400656da0e391e99dccfa911dd2382 Mon Sep 17 00:00:00 2001
From: Piotr Drapich <drapich.piotr@gmail.com>
Date: Thu, 4 Feb 2021 14:16:13 +0100
Subject: [PATCH 1/2] add memoization to the columnsWidth to prevent rendering
 of all innerblocks

---
 .../block-library/src/columns/edit.native.js  | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index d03497b91e240..40a8f024fdd6f 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -30,6 +30,7 @@ import {
 	useContext,
 	useMemo,
 	useCallback,
+	memo,
 } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
@@ -91,7 +92,7 @@ function ColumnsEditContainer( {
 	columnCount,
 	isSelected,
 	onDeleteBlock,
-	innerColumns,
+	innerWidths,
 	updateInnerColumnWidth,
 	editorSidebarOpened,
 } ) {
@@ -145,10 +146,10 @@ function ColumnsEditContainer( {
 				columnsInRow,
 				width,
 				columnCount,
-				innerColumns,
+				innerWidths,
 				globalStyles
 			),
-		[ width, columnsInRow, columnCount, innerColumns, globalStyles ]
+		[ width, columnsInRow, columnCount, innerWidths, globalStyles ]
 	);
 
 	const onAddBlock = useCallback( () => {
@@ -163,7 +164,7 @@ function ColumnsEditContainer( {
 
 	const onChangeUnit = ( nextUnit, index, columnId ) => {
 		const widthWithoutUnit = parseFloat(
-			getWidths( innerColumns )[ index ]
+			getWidths( innerWidths )[ index ]
 		);
 		const widthWithUnit = getWidthWithUnit( widthWithoutUnit, nextUnit );
 
@@ -182,14 +183,14 @@ function ColumnsEditContainer( {
 			return null;
 		}
 
-		return innerColumns.map( ( column, index ) => {
+		return innerWidths.map( ( column, index ) => {
 			const { valueUnit = '%' } =
 				getValueAndUnit( column.attributes.width ) || {};
 			return (
 				<UnitControl
 					label={ `Column ${ index + 1 }` }
 					key={ `${ column.clientId }-${
-						getWidths( innerColumns ).length
+						getWidths( innerWidths ).length
 					}` }
 					min={ 1 }
 					max={
@@ -198,7 +199,7 @@ function ColumnsEditContainer( {
 							: undefined
 					}
 					decimalNum={ 1 }
-					value={ getWidths( innerColumns )[ index ] }
+					value={ getWidths( innerWidths )[ index ] }
 					onChange={ ( nextWidth ) => {
 						onChange( nextWidth, valueUnit, column.clientId );
 					} }
@@ -212,14 +213,14 @@ function ColumnsEditContainer( {
 					units={ CSS_UNITS }
 					preview={
 						<ColumnsPreview
-							columnWidths={ getWidths( innerColumns, false ) }
+							columnWidths={ getWidths( innerWidths, false ) }
 							selectedColumnIndex={ index }
 						/>
 					}
 				/>
 			);
 		} );
-	}, [ editorSidebarOpened, isSelected, innerColumns ] );
+	}, [ editorSidebarOpened, isSelected, innerWidths ] );
 
 	const onChangeColumnsNum = useCallback(
 		( value ) => {
@@ -433,14 +434,14 @@ const ColumnsEditContainerWrapper = withDispatch(
 			removeBlock( clientId );
 		},
 	} )
-)( ColumnsEditContainer );
+)( memo( ColumnsEditContainer ) );
 
 const ColumnsEdit = ( props ) => {
 	const { clientId, isSelected } = props;
 	const {
 		columnCount,
 		isDefaultColumns,
-		innerColumns = [],
+		innerWidths = [],
 		hasParents,
 		parentBlockAlignment,
 		editorSidebarOpened,
@@ -448,23 +449,27 @@ const ColumnsEdit = ( props ) => {
 		( select ) => {
 			const {
 				getBlockCount,
-				getBlock,
+				getBlocks,
 				getBlockParents,
 				getBlockAttributes,
 			} = select( 'core/block-editor' );
 			const { isEditorSidebarOpened } = select( 'core/edit-post' );
-			const block = getBlock( clientId );
-			const innerBlocks = block?.innerBlocks;
+			const innerBlocks = getBlocks( clientId );
 			const isContentEmpty = map(
 				innerBlocks,
 				( innerBlock ) => innerBlock.innerBlocks.length
 			);
+
+			const innerColumnsWidths = innerBlocks.map( ( inn ) => ( {
+				clientId: inn.clientId,
+				attributes: { width: inn.attributes.width },
+			} ) );
 			const parents = getBlockParents( clientId, true );
 
 			return {
 				columnCount: getBlockCount( clientId ),
 				isDefaultColumns: ! compact( isContentEmpty ).length,
-				innerColumns: innerBlocks,
+				innerWidths: innerColumnsWidths,
 				hasParents: !! parents.length,
 				parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
 				editorSidebarOpened: isEditorSidebarOpened(),
@@ -473,6 +478,10 @@ const ColumnsEdit = ( props ) => {
 		[ clientId ]
 	);
 
+	const memoizedInnerWidths = useMemo( () => {
+		return innerWidths;
+	}, [ JSON.stringify( innerWidths ) ] );
+
 	const [ isVisible, setIsVisible ] = useState( false );
 
 	useEffect( () => {
@@ -485,7 +494,7 @@ const ColumnsEdit = ( props ) => {
 		<>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
-				innerColumns={ innerColumns }
+				innerWidths={ memoizedInnerWidths }
 				hasParents={ hasParents }
 				parentBlockAlignment={ parentBlockAlignment }
 				editorSidebarOpened={ editorSidebarOpened }

From 360b1ecdd0f657be4b1299e04e82e0a5ca22e28c Mon Sep 17 00:00:00 2001
From: Piotr Drapich <drapich.piotr@gmail.com>
Date: Mon, 8 Feb 2021 15:38:35 +0100
Subject: [PATCH 2/2] add comment about using JSON.stringify

---
 packages/block-library/src/columns/edit.native.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 40a8f024fdd6f..75637793a19e8 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -480,7 +480,11 @@ const ColumnsEdit = ( props ) => {
 
 	const memoizedInnerWidths = useMemo( () => {
 		return innerWidths;
-	}, [ JSON.stringify( innerWidths ) ] );
+	}, [
+		// The JSON.stringify is used because innerWidth is always a new reference.
+		// The innerBlocks is a new reference after each attribute change of any nested block.
+		JSON.stringify( innerWidths ),
+	] );
 
 	const [ isVisible, setIsVisible ] = useState( false );