useAvailableAlignments: avoid useSelect subscription when alignments array is empty #55449
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
jsnajdr
added
[Type] Performance
|
Size Change: +8 B (0%) Total Size: 1.66 MB
ℹ️ View Unchanged
|
Mamaduka
approved these changes
Oct 19, 2023
Comment on lines
+27
to
+33
| // If `isNoneOnly` is true, we'll be returning early because there is | ||
| // nothing to filter on an empty array. We won't need the info from | ||
| // the `useSelect` but we must call it anyway because Rules of Hooks. | ||
| // So the callback returns early to avoid block editor subscription. | ||
| if ( isNoneOnly ) { | ||
| return [ false, false, false ]; | ||
| } |
There was a problem hiding this comment.
Hopefully, the comment will mitigate this odd return value 😄
There was a problem hiding this comment.
Yes, it bothers me that it looks so weird 🙂
On the other hand, this patch demonstrates a useSelect usage pattern that I think its quite neat and we could adopt it more widely: returning arrays instead of objects!
When writing:
const { themeSupportsLayout } = useSelect( ( select ) => ( { themeSupportsLayout: ... } ) );the themeSupportsLayout identifier is repeated twice, and constructing and destructuring the object is a bit unwieldy. Compare this to an array:
const [ themeSupportsLayout ] = useSelect( ( select ) => ( [ ... ] ) );That's much shorter and yet you don't lose any information. We're replacing the themeSupportsLayout with a 0 array index, basically. The field name doesn't matter because it's immediately destructured anyway.
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.
Three optimizations related to the
useAvailableAlignmentshook and thealignattribute.There's an observation that if the
controlsarray passed touseAvailableAlignments( controls )is an[]empty array or[ 'none' ], the return value of the hook is going to be[]. The hook filters thecontrolsarray depending on what the theme and the parent layout says, but there's not much to do with an empty array.Therefore, in this case, we can make the
useSelectinsideuseAvailableAlignmentsinto a noop, so that it doesn't select fromcore/block-editorstore at all and doesn't create a subscription.The second observation is that sometimes we call
useAvailableAlignmentstwice. ThewithToolbarControlsHOC calls it the first time, and then theBlockAlignmentControlcomponent calls it the second time, on the result of the first call. We can remove thewithToolbarControlscall. It checks only for an empty array anyway, and theBlockAlignmentControlwill do the same check once again.The third optimization is in the
withDataAlignHOC. If thealignattribute isundefined, which it almost always is, the HOC does nothing at all. All the hook calls can be extracted into the helperBlockListBlockWithDataAligncomponent that is rendered only whenalignis defined.On a large post with 1400 blocks I was able to reduce the
core/block-editorsubscriptions by 2900, i.e., 2 per block.This improvement is a part of the program outlined in #54819.