[RNMobile] Add memoization to the columns width mechanism (#28743)

* add memoization to the columnsWidth to prevent rendering of all innerblocks
WordPress · Feb 8, 2021 · e1204e5 · e1204e5
1 parent 97d7b1c
commit e1204e5
Showing 1 changed file with 29 additions and 16 deletions.
diff --git 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,
 } ) {
@@ -144,10 +145,10 @@ function ColumnsEditContainer( {
 				columnsInRow,
 				width,
 				columnCount,
-				innerColumns,
+				innerWidths,
 				globalStyles
 			),
-		[ width, columnsInRow, columnCount, innerColumns, globalStyles ]
+		[ width, columnsInRow, columnCount, innerWidths, globalStyles ]
 	);
 
 	const onAddBlock = useCallback( () => {
@@ -162,7 +163,7 @@ function ColumnsEditContainer( {
 
 	const onChangeUnit = ( nextUnit, index, columnId ) => {
 		const widthWithoutUnit = parseFloat(
-			getWidths( innerColumns )[ index ]
+			getWidths( innerWidths )[ index ]
 		);
 		const widthWithUnit = getWidthWithUnit( widthWithoutUnit, nextUnit );
 
@@ -181,14 +182,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={
@@ -197,7 +198,7 @@ function ColumnsEditContainer( {
 							: undefined
 					}
 					decimalNum={ 1 }
-					value={ getWidths( innerColumns )[ index ] }
+					value={ getWidths( innerWidths )[ index ] }
 					onChange={ ( nextWidth ) => {
 						onChange( nextWidth, valueUnit, column.clientId );
 					} }
@@ -211,14 +212,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 ) => {
@@ -432,39 +433,43 @@ const ColumnsEditContainerWrapper = withDispatch(
 			removeBlock( clientId );
 		},
 	} )
-)( ColumnsEditContainer );
+)( memo( ColumnsEditContainer ) );
 
 const ColumnsEdit = ( props ) => {
 	const { clientId, isSelected } = props;
 	const {
 		columnCount,
 		isDefaultColumns,
-		innerColumns = [],
+		innerWidths = [],
 		hasParents,
 		parentBlockAlignment,
 		editorSidebarOpened,
 	} = useSelect(
 		( select ) => {
 			const {
 				getBlockCount,
-				getBlock,
+				getBlocks,
 				getBlockParents,
 				getBlockAttributes,
 			} = select( 'core/block-editor' );
 			const { isEditorSidebarOpened } = select( 'core/edit-post' );
+			const innerBlocks = getBlocks( clientId );
 
-			const block = getBlock( clientId );
-			const innerBlocks = block?.innerBlocks;
 			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: isSelected && isEditorSidebarOpened(),
@@ -473,6 +478,14 @@ const ColumnsEdit = ( props ) => {
 		[ clientId ]
 	);
 
+	const memoizedInnerWidths = useMemo( () => {
+		return 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 );
 
 	useEffect( () => {
@@ -489,7 +502,7 @@ const ColumnsEdit = ( props ) => {
 		<>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
-				innerColumns={ innerColumns }
+				innerWidths={ memoizedInnerWidths }
 				hasParents={ hasParents }
 				parentBlockAlignment={ parentBlockAlignment }
 				editorSidebarOpened={ editorSidebarOpened }