Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor selectors used in copy-handler #11844

Merged
merged 3 commits into from
Nov 14, 2018
Merged

Conversation

youknowriad
Copy link
Contributor

Extracted form #11811

In this PR, I avoid using the not-so performant selectors getSelectedBlock and getMultiSelectedBlocks in the withSelect HoC and I replace them with getSelectedBlockClientId and a getBlocks selectors only used in the block handler.

@youknowriad youknowriad added the [Type] Performance Related to performance efforts label Nov 14, 2018
@youknowriad youknowriad added this to the 4.4 milestone Nov 14, 2018
@youknowriad youknowriad self-assigned this Nov 14, 2018
@youknowriad youknowriad requested a review from a team November 14, 2018 08:35

// We only care about this value when the copy is performed
// We call it dynamically in the event handler to avoid unnecessary re-renders.
getBlocks,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've used the same technique used in the other PR (cc @gziolo @aduth), it's becoming a pattern, we might want to find a more elegant solution in a follow-up PR. (withDispatch access to select somehow)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I remember withDispatch wraps those handlers with proxies to ensure they don’t update on every prop change. So you can’t execute select outside of those handlers as they will become immediately stale. We will have to document it properly to avoid any bugs. It is advanced usage which is necessary mostly in core, so it might be okey to attack it this way.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will open PR and let's discuss it there.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is one place where I'm not sure whether the logic is exactly the same.

@@ -26,18 +26,18 @@ class CopyHandler extends Component {
}

onCopy( event ) {
const { multiSelectedBlocks, selectedBlock } = this.props;
const { selectedBlockClientIds, getBlocks } = this.props;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const { selectedBlockClientIds, getBlocks } = this.props;
const { selectedBlockClientIds = [], getBlocks } = this.props;

would it be possible to use to simplify next conditional check?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually it's an array in all cases, I'll just remove the first check.

@@ -46,12 +46,12 @@ class CopyHandler extends Component {
}

onCut( event ) {
const { multiSelectedBlockClientIds } = this.props;
const { selectedBlockClientIds } = this.props;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same as above with defaulting to an empty array.


this.onCopy( event );

if ( multiSelectedBlockClientIds.length ) {
this.props.onRemove( multiSelectedBlockClientIds );
if ( selectedBlockClientIds && selectedBlockClientIds.length ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const selectedBlockClientIds = selectedBlockClientId ? [ selectedBlockClientId ] : getMultiSelectedBlockClientIds();

Should there be a check whethere there is more than one id in here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I'd add a boolean flag hasMultiSelection it's more secure

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Everything was addressed, thanks. You can 🚢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Performance Related to performance efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants