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

Block: Avoid rerendering when the previous/next block updates #5025

Merged
merged 2 commits into from
Feb 13, 2018

Conversation

youknowriad
Copy link
Contributor

the getPreviousBlock and getNextBlock selectors are causing the block to rerender if its previous/next block changes. This is unnecessary because we only need these blocks for "merge" behaviors.

This PR updates the merge behavior to rely on UIDs instead of the whole object.

Testing instructions

  • Try the merge behavior (enter + backspace)
  • Check using the React Dev Tools that when you type in a block, the next/previous blocks are not rerendering.

@youknowriad youknowriad added the [Type] Performance Related to performance efforts label Feb 13, 2018
@youknowriad youknowriad self-assigned this Feb 13, 2018
@youknowriad
Copy link
Contributor Author

It looks like in all places we use getPreviousBlock and getNextBlock we care only about the uids, so I updated the selectors to return the uid directly. These selectors are more performant this way.

@aduth
Copy link
Member

aduth commented Feb 13, 2018

Nice idea! I saw these light up in React Dev Tools Highlight Updates as well 😄

Could you give the branch a rebase? Will take a look later this morning.

@youknowriad youknowriad force-pushed the update/optimize-previous-next-block branch from b19542a to 124ea5d Compare February 13, 2018 13:58
@youknowriad
Copy link
Contributor Author

Rebased, thanks @aduth

@@ -57,8 +57,8 @@ import {
isMultiSelecting,
getBlockIndex,
getEditedPostAttribute,
getNextBlock,
getPreviousBlock,
getNextBlockUid,
Copy link
Member

Choose a reason for hiding this comment

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

We need to come to a convention on camel-case for abbreviations. Elsewhere I've used e.g. rootUID

Related: #2511

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Right! I thought we kind of agreed on always camel casing abbreviations at some point but happy to change anyway.

@youknowriad youknowriad merged commit f1726d8 into master Feb 13, 2018
@youknowriad youknowriad deleted the update/optimize-previous-next-block branch February 13, 2018 20:33
aduth added a commit that referenced this pull request Mar 9, 2018
Regression of #5025, where prop was changed from `previousBlock` to `previousBlockUid`, but neglected to update the instance of the prop reference in keydown handler
aduth added a commit that referenced this pull request Mar 9, 2018
* Block List: Fix select previous on backspace behavior

Regression of #5025, where prop was changed from `previousBlock` to `previousBlockUid`, but neglected to update the instance of the prop reference in keydown handler

* Utils: Improve spec compliancy of text field

* Block: Prefer focus text field on selection, fallback to wrapper

* Writing Flow: Refactor getClosestTabbable to support non-tabbable target

* Block List: Extract typing monitor to separate component

* Block List: Don't deselect block on escape press

Escape doesn't clear focus, so causes problems that block is not selected but retains focus (since isSelected state is synced with focus)

* Block List: Fix delete or insert after focused block wrapper node

* Rich Text: Ensure format toolbar manages its own dismissal

Previously only closed on esc when editing link, not adding new link

TODO: Consolidate editing state
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