Block Editor: Fix some usages of useSelect that return unstable results #46226
Conversation
This file contains hidden or 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
approved these changes
Dec 1, 2022
| ); | ||
| }, | ||
| ( state, rootClientId ) => [ | ||
| ( state, blocks, rootClientId ) => [ |
| const selectedBlockPossibleTransformations = selectedBlock | ||
| ? getBlockTransformItems( [ selectedBlock ], rootClientId ) | ||
| : []; | ||
| ? getBlockTransformItems( selectedBlock, rootClientId ) |
mpkelly
pushed a commit
to mpkelly/gutenberg
that referenced
this pull request
Dec 7, 2022
…46226) * UngroupButton: return stable innerBlocks value * getBlockTransformItems: fix params for the dependants function * BlockActionsMenu: pass bare selectedBlock to getBlockTransformItems to enable memoization
ryanwelcher
changed the title
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.
When fixing unit tests for the React 18 migration, I discovered there are some unwanted component rerenders. They happen after editing rich text, when there is a debounced (after 1s) creation of an undo level and dispatch of the
MARK_LAST_CHANGE_AS_PERSISTENTaction. The only selector that changes return value after this action should ever be onlyisLastBlockChangePersistent, and theuseBlockSynchook that uses it. Nothing else.But there are a few components that rerender:
The
UngroupButtoncomponent has a select call that returns an emptyinnerBlocksarray if theisUngroupablevalue isfalse. This array is a new instance on each call, leading to rerenders. I extracted it to a module-level constant.The
BlockActionsMenucomponent does something similar withselectedBlockPossibleTransformationswhen there is no selected block. Also, it disables memoization of thegetBlockTransformItemsselection because it passes a new[ selectedBlock ]array to it on every call.rememoreturns a memoized value only if all the args are exactly the same. I fixed this by passing only the stableselectedBlockobject to the selector. The selector will normalize the value to an one-item array internally.The
getBlockTransformItemsselector also has a little bug in the dependants callback. There are wrong args. Theblocksarg was interpreted asrootClientIdand the of course thestate.blockListSettings[ rootClientId ]is invalid, always returningundefined.How to test:
Run React Native unit tests for the list block:
Before this patch, it would report "update not wrapped in
act()" warnings. Because theuseSelecthook detected changes and forced rerender of a component. After this patch, these warnings disappear.