[RNMobile] performance improvements

package.json

@@ -145,6 +145,7 @@
 		"babel-plugin-inline-json-import": "0.3.2",
 		"babel-plugin-react-native-classname-to-style": "1.2.2",
 		"babel-plugin-react-native-platform-specific-extensions": "1.1.1",
+		"babel-plugin-transform-remove-console": "6.9.4",
 		"benchmark": "2.1.4",
 		"browserslist": "4.15.0",
 		"chalk": "4.0.0",

packages/block-editor/src/components/block-list/index.native.js

@@ -382,16 +382,14 @@ export default compose( [
 			const { maxWidth } = getSettings();
 			const isReadOnly = getSettings().readOnly;
 
-			const blockCount = getBlockCount( rootBlockId );
-
 			const rootBlockId = getBlockHierarchyRootClientId(
 				selectedBlockClientId
 			);
+			const blockCount = getBlockCount( rootBlockId );
 			const hasRootInnerBlocks = !! blockCount;
 
 			const isFloatingToolbarVisible =
 				!! selectedBlockClientId && hasRootInnerBlocks;
-
 			return {
 				blockClientIds,
 				blockCount,

packages/block-editor/src/components/block-variation-picker/index.native.js

@@ -77,38 +77,41 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 		onClose();
 	};
 
-	return (
-		<BottomSheet
-			isVisible={ isVisible }
-			onClose={ onClose }
-			title={ __( 'Select a layout' ) }
-			contentStyle={ styles.contentStyle }
-			leftButton={ leftButton }
-		>
-			<ScrollView
-				horizontal
-				showsHorizontalScrollIndicator={ false }
-				contentContainerStyle={ styles.contentContainerStyle }
-				style={ styles.containerStyle }
+	return useMemo(
+		() => (
+			<BottomSheet
+				isVisible={ isVisible }
+				onClose={ onClose }
+				title={ __( 'Select a layout' ) }
+				contentStyle={ styles.contentStyle }
+				leftButton={ leftButton }
 			>
-				{ variations.map( ( v ) => {
-					return (
-						<InserterButton
-							item={ v }
-							key={ v.name }
-							onSelect={ () => onVariationSelect( v ) }
-						/>
-					);
-				} ) }
-			</ScrollView>
-			<PanelBody>
-				<FooterMessageControl
-					label={ __(
-						'Note: Column layout may vary between themes and screen sizes'
-					) }
-				/>
-			</PanelBody>
-		</BottomSheet>
+				<ScrollView
+					horizontal
+					showsHorizontalScrollIndicator={ false }
+					contentContainerStyle={ styles.contentContainerStyle }
+					style={ styles.containerStyle }
+				>
+					{ variations.map( ( v ) => {
+						return (
+							<InserterButton
+								item={ v }
+								key={ v.name }
+								onSelect={ () => onVariationSelect( v ) }
+							/>
+						);
+					} ) }
+				</ScrollView>
+				<PanelBody>
+					<FooterMessageControl
+						label={ __(
+							'Note: Column layout may vary between themes and screen sizes'
+						) }
+					/>
+				</PanelBody>
+			</BottomSheet>
+		),
+		[ variations, isVisible, onClose ]
 	);
 }
 

packages/block-editor/src/components/inserter/index.native.js

@@ -371,7 +371,7 @@ export default compose( [
 			insertionIndexAfter,
 			insertionIndexStart,
 			insertionIndexEnd,
-			isAnyBlockSelected,
+			isAnyBlockSelected: !! isAnyBlockSelected,
 			isSelectedBlockReplaceable: isSelectedUnmodifiedDefaultBlock,
 		};
 	} ),

packages/block-library/src/button/edit.native.js

@@ -99,10 +99,10 @@ class ButtonEdit extends Component {
 	}
 
 	componentDidUpdate( prevProps, prevState ) {
-		const { selectedId, editorSidebarOpened, parentWidth } = this.props;
+		const { isSelected, editorSidebarOpened, parentWidth } = this.props;
 		const { isLinkSheetVisible, isButtonFocused } = this.state;
 
-		if ( prevProps.selectedId !== selectedId ) {
+		if ( isSelected && ! prevProps.isSelected ) {
 			this.onToggleButtonFocus( true );
 		}
 
@@ -123,17 +123,11 @@ class ButtonEdit extends Component {
 		}
 
 		if ( this.richTextRef ) {
-			const selectedRichText = this.richTextRef.props.id === selectedId;
-
-			if ( ! selectedRichText && isButtonFocused ) {
+			if ( ! isSelected && isButtonFocused ) {
 				this.onToggleButtonFocus( false );
 			}
 
-			if (
-				selectedRichText &&
-				selectedId !== prevProps.selectedId &&
-				! isButtonFocused
-			) {
+			if ( isSelected && ! isButtonFocused ) {
 				AccessibilityInfo.isScreenReaderEnabled().then( ( enabled ) => {
 					if ( enabled ) {
 						this.onToggleButtonFocus( true );
@@ -194,7 +188,9 @@ class ButtonEdit extends Component {
 	}
 
 	onToggleButtonFocus( value ) {
-		this.setState( { isButtonFocused: value } );
+		if ( value !== this.state.isButtonFocused ) {
+			this.setState( { isButtonFocused: value } );
+		}
 	}
 
 	onClearSettings() {
@@ -444,23 +440,18 @@ export default compose( [
 	withInstanceId,
 	withGradient,
 	withColors( 'backgroundColor', { textColor: 'color' } ),
-	withSelect( ( select, { clientId } ) => {
+	withSelect( ( select, { clientId, isSelected } ) => {
 		const { isEditorSidebarOpened } = select( 'core/edit-post' );
-		const {
-			getSelectedBlockClientId,
-			getBlockCount,
-			getBlockRootClientId,
-			getSettings,
-		} = select( 'core/block-editor' );
+		const { getBlockCount, getBlockRootClientId, getSettings } = select(
+			'core/block-editor'
+		);
 		const { maxWidth } = getSettings();
 
 		const parentId = getBlockRootClientId( clientId );
-		const selectedId = getSelectedBlockClientId();
 		const numOfButtons = getBlockCount( parentId );
 
 		return {
-			selectedId,
-			editorSidebarOpened: isEditorSidebarOpened(),
+			editorSidebarOpened: isSelected && isEditorSidebarOpened(),
 			numOfButtons,
 			maxWidth,
 		};

packages/block-library/src/buttons/edit.native.js

@@ -11,7 +11,7 @@ import { BlockControls, InnerBlocks } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import {
 	ToolbarGroup,
 	ToolbarItem,
@@ -28,6 +28,8 @@ import ContentJustificationDropdown from './content-justification-dropdown';
 const ALLOWED_BLOCKS = [ buttonBlockName ];
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
+const layoutProp = { type: 'default', alignments: [] };
+
 export default function ButtonsEdit( {
 	attributes: { contentJustification, align },
 	clientId,
@@ -83,20 +85,25 @@ export default function ButtonsEdit( {
 		}
 	}, [ sizes, align ] );
 
-	const onAddNextButton = debounce( ( selectedId ) => {
-		const order = getBlockOrder( clientId );
-		const selectedButtonIndex = order.findIndex(
-			( i ) => i === selectedId
-		);
+	const onAddNextButton = useCallback(
+		debounce( ( selectedId ) => {
+			const order = getBlockOrder( clientId );
+			const selectedButtonIndex = order.findIndex(
+				( i ) => i === selectedId
+			);
 
-		const index =
-			selectedButtonIndex === -1 ? order.length + 1 : selectedButtonIndex;
+			const index =
+				selectedButtonIndex === -1
+					? order.length + 1
+					: selectedButtonIndex;
 
-		const insertedBlock = createBlock( 'core/button' );
+			const insertedBlock = createBlock( 'core/button' );
 
-		insertBlock( insertedBlock, index, clientId );
-		selectBlock( insertedBlock.clientId );
-	}, 200 );
+			insertBlock( insertedBlock, index, clientId );
+			selectBlock( insertedBlock.clientId );
+		}, 200 ),
+		[]
+	);
 
 	function onChangeContentJustification( updatedValue ) {
 		setAttributes( {
@@ -113,8 +120,8 @@ export default function ButtonsEdit( {
 		</View>
 	) );
 
+	const remove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 	const shouldRenderFooterAppender = isSelected || isInnerButtonSelected;
-
 	return (
 		<>
 			{ isSelected && (
@@ -141,14 +148,12 @@ export default function ButtonsEdit( {
 				}
 				orientation="horizontal"
 				horizontalAlignment={ contentJustification }
-				onDeleteBlock={
-					shouldDelete ? () => removeBlock( clientId ) : undefined
-				}
+				onDeleteBlock={ shouldDelete ? remove : undefined }
 				onAddBlock={ onAddNextButton }
 				parentWidth={ maxWidth }
 				marginHorizontal={ spacing }
 				marginVertical={ spacing }
-				__experimentalLayout={ { type: 'default', alignments: [] } }
+				__experimentalLayout={ layoutProp }
 				templateInsertUpdatesSelection
 				blockWidth={ blockWidth }
 			/>

packages/block-library/src/columns/edit.native.js

@@ -106,7 +106,6 @@ function ColumnsEditContainer( {
 	useEffect( () => {
 		if ( columnCount === 0 ) {
 			const newColumnCount = columnCount || DEFAULT_COLUMNS_NUM;
-
 			updateColumns( columnCount, newColumnCount );
 		}
 	}, [] );
@@ -453,6 +452,7 @@ const ColumnsEdit = ( props ) => {
 				getBlockAttributes,
 			} = select( 'core/block-editor' );
 			const { isEditorSidebarOpened } = select( 'core/edit-post' );
+
 			const block = getBlock( clientId );
 			const innerBlocks = block?.innerBlocks;
 			const isContentEmpty = map(
@@ -467,7 +467,7 @@ const ColumnsEdit = ( props ) => {
 				innerColumns: innerBlocks,
 				hasParents: !! parents.length,
 				parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
-				editorSidebarOpened: isEditorSidebarOpened(),
+				editorSidebarOpened: isSelected && isEditorSidebarOpened(),
 			};
 		},
 		[ clientId ]
@@ -481,6 +481,10 @@ const ColumnsEdit = ( props ) => {
 		}
 	}, [] );
 
+	const onClose = useCallback( () => {
+		setIsVisible( false );
+	}, [] );
+
 	return (
 		<>
 			<ColumnsEditContainerWrapper
@@ -493,7 +497,7 @@ const ColumnsEdit = ( props ) => {
 			/>
 			<BlockVariationPicker
 				variations={ variations }
-				onClose={ () => setIsVisible( false ) }
+				onClose={ onClose }
 				clientId={ clientId }
 				isVisible={ isVisible }
 			/>

packages/block-library/src/file/edit.native.js

@@ -583,13 +583,13 @@ export class FileEdit extends Component {
 
 export default compose( [
 	withSelect( ( select, props ) => {
-		const { attributes } = props;
+		const { attributes, isSelected } = props;
 		const { id, href } = attributes;
 		const { isEditorSidebarOpened } = select( 'core/edit-post' );
 		const isNotFileHref = id && getProtocol( href ) !== 'file:';
 		return {
 			media: isNotFileHref ? select( 'core' ).getMedia( id ) : undefined,
-			isSidebarOpened: isEditorSidebarOpened(),
+			isSidebarOpened: isSelected && isEditorSidebarOpened(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

packages/block-library/src/media-text/edit.native.js

@@ -396,23 +396,18 @@ export default compose(
 	withSelect( ( select, { clientId } ) => {
 		const {
 			getSelectedBlockClientId,
-			getBlockRootClientId,
 			getBlockParents,
 			getSettings,
 		} = select( 'core/block-editor' );
 
 		const parents = getBlockParents( clientId, true );
 
 		const selectedBlockClientId = getSelectedBlockClientId();
-		const isParentSelected =
-			selectedBlockClientId &&
-			selectedBlockClientId === getBlockRootClientId( clientId );
 		const isAncestorSelected =
 			selectedBlockClientId && parents.includes( selectedBlockClientId );
 
 		return {
 			isSelected: selectedBlockClientId === clientId,
-			isParentSelected,
 			isAncestorSelected,
 			isRTL: getSettings().isRTL,
 		};

packages/block-library/src/paragraph/edit.native.js

@@ -8,6 +8,7 @@ import {
 	BlockControls,
 	RichText,
 } from '@wordpress/block-editor';
+import { useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 const name = 'core/paragraph';
@@ -31,15 +32,16 @@ function ParagraphBlock( {
 		...style,
 	};
 
+	const onAlignmentChange = useCallback( ( nextAlign ) => {
+		setAttributes( { align: nextAlign } );
+	}, [] );
 	return (
 		<>
 			<BlockControls>
 				<AlignmentToolbar
 					value={ align }
 					isRTL={ isRTL }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { align: nextAlign } );
-					} }
+					onChange={ onAlignmentChange }
 				/>
 			</BlockControls>
 			<RichText