Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Feb 8, 2021
Merged

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad6f553
add memoization to the columnsWidth to prevent rendering of all inner…
dratwas Feb 4, 2021
360b1ec
add comment about using JSON.stringify
dratwas Feb 8, 2021
16f26e6
merge with master and resolve conflicts
dratwas Feb 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 29 additions & 16 deletions packages/block-library/src/columns/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
useContext,
useMemo,
useCallback,
memo,
} from '@wordpress/element';
import { useResizeObserver } from '@wordpress/compose';
import { createBlock } from '@wordpress/blocks';
Expand Down Expand Up @@ -91,7 +92,7 @@ function ColumnsEditContainer( {
columnCount,
isSelected,
onDeleteBlock,
innerColumns,
innerWidths,
updateInnerColumnWidth,
editorSidebarOpened,
} ) {
Expand Down Expand Up @@ -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( () => {
Expand All @@ -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 );

Expand All @@ -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={
Expand All @@ -197,7 +198,7 @@ function ColumnsEditContainer( {
: undefined
}
decimalNum={ 1 }
value={ getWidths( innerColumns )[ index ] }
value={ getWidths( innerWidths )[ index ] }
onChange={ ( nextWidth ) => {
onChange( nextWidth, valueUnit, column.clientId );
} }
Expand All @@ -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 ) => {
Expand Down Expand Up @@ -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(),
Expand All @@ -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( () => {
Expand All @@ -489,7 +502,7 @@ const ColumnsEdit = ( props ) => {
<>
<ColumnsEditContainerWrapper
columnCount={ columnCount }
innerColumns={ innerColumns }
innerWidths={ memoizedInnerWidths }
hasParents={ hasParents }
parentBlockAlignment={ parentBlockAlignment }
editorSidebarOpened={ editorSidebarOpened }
Expand Down