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

* add memoization to the columnsWidth to prevent rendering of all innerblocks

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 }