Avoid unnecessary re-renders when navigating between blocks (#11495)

* Performance: Avoid unnecessary re-renders when navigating between blocks with keyboard

* Small tweak per review

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

@@ -70,6 +70,7 @@ export class BlockListBlock extends Component {
 		this.onDragStart = this.onDragStart.bind( this );
 		this.onDragEnd = this.onDragEnd.bind( this );
 		this.selectOnOpen = this.selectOnOpen.bind( this );
+		this.onShiftSelection = this.onShiftSelection.bind( this );
 		this.hadTouchStart = false;
 
 		this.state = {
@@ -285,7 +286,7 @@ export class BlockListBlock extends Component {
 
 		if ( event.shiftKey ) {
 			if ( ! this.props.isSelected ) {
-				this.props.onShiftSelection( this.props.clientId );
+				this.onShiftSelection();
 				event.preventDefault();
 			}
 		} else {
@@ -357,6 +358,20 @@ export class BlockListBlock extends Component {
 		}
 	}
 
+	onShiftSelection() {
+		if ( ! this.props.isSelectionEnabled ) {
+			return;
+		}
+
+		const { getBlockSelectionStart, onMultiSelect, onSelect } = this.props;
+
+		if ( getBlockSelectionStart() ) {
+			onMultiSelect( getBlockSelectionStart(), this.props.clientId );
+		} else {
+			onSelect( this.props.clientId );
+		}
+	}
+
 	render() {
 		return (
 			<HoverArea container={ this.wrapperNode }>
@@ -601,6 +616,7 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV
 		getEditorSettings,
 		hasSelectedInnerBlock,
 		getTemplateLock,
+		getBlockSelectionStart,
 	} = select( 'core/editor' );
 	const isSelected = isBlockSelected( clientId );
 	const { hasFixedToolbar, focusMode } = getEditorSettings();
@@ -634,13 +650,17 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV
 		block,
 		isSelected,
 		isParentOfSelectedBlock,
+		// We only care about this value when the shift key is pressed.
+		// We call it dynamically in the event handler to avoid unnecessary re-renders.
+		getBlockSelectionStart,
 	};
 } );
 
 const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
 	const {
 		updateBlockAttributes,
 		selectBlock,
+		multiSelect,
 		insertBlocks,
 		insertDefaultBlock,
 		removeBlock,
@@ -657,6 +677,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
 		onSelect( clientId = ownProps.clientId, initialPosition ) {
 			selectBlock( clientId, initialPosition );
 		},
+		onMultiSelect: multiSelect,
 		onInsertBlocks( blocks, index ) {
 			const { rootClientId } = ownProps;
 			insertBlocks( blocks, index, rootClientId );

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

@@ -29,7 +29,6 @@ class BlockList extends Component {
 
 		this.onSelectionStart = this.onSelectionStart.bind( this );
 		this.onSelectionEnd = this.onSelectionEnd.bind( this );
-		this.onShiftSelection = this.onShiftSelection.bind( this );
 		this.setBlockRef = this.setBlockRef.bind( this );
 		this.setLastClientY = this.setLastClientY.bind( this );
 		this.onPointerMove = throttle( this.onPointerMove.bind( this ), 100 );
@@ -170,20 +169,6 @@ class BlockList extends Component {
 		}
 	}
 
-	onShiftSelection( clientId ) {
-		if ( ! this.props.isSelectionEnabled ) {
-			return;
-		}
-
-		const { selectionStartClientId, onMultiSelect, onSelect } = this.props;
-
-		if ( selectionStartClientId ) {
-			onMultiSelect( selectionStartClientId, clientId );
-		} else {
-			onSelect( clientId );
-		}
-	}
-
 	render() {
 		const {
 			blockClientIds,
@@ -200,7 +185,6 @@ class BlockList extends Component {
 						clientId={ clientId }
 						blockRef={ this.setBlockRef }
 						onSelectionStart={ this.onSelectionStart }
-						onShiftSelection={ this.onShiftSelection }
 						rootClientId={ rootClientId }
 						isFirst={ blockIndex === 0 }
 						isLast={ blockIndex === blockClientIds.length - 1 }
@@ -221,15 +205,13 @@ export default compose( [
 			isMultiSelecting,
 			getMultiSelectedBlocksStartClientId,
 			getMultiSelectedBlocksEndClientId,
-			getBlockSelectionStart,
 		} = select( 'core/editor' );
 		const { rootClientId } = ownProps;
 
 		return {
 			blockClientIds: getBlockOrder( rootClientId ),
 			selectionStart: getMultiSelectedBlocksStartClientId(),
 			selectionEnd: getMultiSelectedBlocksEndClientId(),
-			selectionStartClientId: isSelectionEnabled() && getBlockSelectionStart(),
 			isSelectionEnabled: isSelectionEnabled(),
 			isMultiSelecting: isMultiSelecting(),
 		};
@@ -239,14 +221,12 @@ export default compose( [
 			startMultiSelect,
 			stopMultiSelect,
 			multiSelect,
-			selectBlock,
 		} = dispatch( 'core/editor' );
 
 		return {
 			onStartMultiSelect: startMultiSelect,
 			onStopMultiSelect: stopMultiSelect,
 			onMultiSelect: multiSelect,
-			onSelect: selectBlock,
 		};
 	} ),
 ] )( BlockList );