Columns mobile block: avoid returning unstable innerWidths from useSelect #46403
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: 0 B Total Size: 1.32 MB ℹ️ View Unchanged
|
tyxla
reviewed
Dec 9, 2022
| @@ -2,7 +2,7 @@ | |||
| * External dependencies | |||
| */ | |||
| import { View, Dimensions } from 'react-native'; | |||
| import { map } from 'lodash'; | |||
|
|
|||
| @@ -463,38 +463,35 @@ const ColumnsEdit = ( props ) => { | |||
| getBlockAttributes, | |||
| } = select( blockEditorStore ); | |||
| const { isEditorSidebarOpened } = select( 'core/edit-post' ); | |||
| const innerBlocks = getBlocks( clientId ); | |||
There was a problem hiding this comment.
Thanks for fixing the naming collision 👍
Comment on lines
+469
to
+470
| const isContentEmpty = innerBlocksList.every( | ||
| ( innerBlock ) => innerBlock.innerBlocks.length === 0 |
There was a problem hiding this comment.
Much better 👍 Previously, isContentEmpty was an array of booleans, which didn't make much sense.
geriux
added
the
Mobile App - i.e. Android or iOS
geriux
approved these changes
Dec 12, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes a performance issue when editing the "Columns" block on mobile. I discovered this when improving React Native unit tests after the React 18 migration, removing "update not wrapped in
act()" warnings.A
useSelectcall in theColumnsEditcomponent returns aninnerWidtharray. This array is a different instance on every call, because it's a result of.map, no matter whether the sourceinnerBlockshave changed or not. That leads to forcedColumnsEditrerender on every change in theblockEditorStore, relevant or not.I'm fixing this by returning the stable
innerBlocksvalue from theuseSelect, and doing theinnerWidthcalculation and memoization outsideuseSelect. That leads to rerenders only wheninnerBlocksor other selected property really change.I also simplified the calculation of
isContentEmpty.