[7.x] Kill unnecessary re-renders in ElementWrapper (#31734) #31966
+22
−23
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
## Summary (fixes elastic#29700) This is a small change that creates a huge impact on UI performance in Canvas. As the mouse moves over a workpad, several parts of the state of the workpad, (the element hovered, the element moved if one is being held, etc) change. These changes in state were causing every active Element to re-render in React. In short, you may hover Element 10, but Elements 1-9 re-render because the state of the entire workpad changes. This would happen even if the mouse were moved a single pixel. By short-circuiting that re-render with a fast comparison, we prevent any Elements that are not affected from re-rendering... freeing up the main thread. This performance impact intensifies as one adds Elements to the workpad. Here is a performance shapshot before this change was made. Notice the React tree reconciliation encompasses the entire 280ms. This reflects a single state change flowing through all of the Elements on the workpad, (each orange "stalactite" descending downwards is an Element):  Here is a snapshot after. That reconciliation now completes in 50ms or less:  *This is not the end of this problem.* There are many other opportunities to prevent re-rendering, and we need to focus on killing the need for the comparison in the first place. @monfera and @w33ble will be instrumental in making these changes in the future... for now, though, this gets the job done. ### Checklist Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR. - [x] This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) - [ ] ~~Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)~~ - [ ] ~~[Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~~ - [ ] ~~[Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~~ - [ ] ~~This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~~ ### For maintainers - [x] This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process) - [ ] ~~This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~~
💚 Build Succeeded |
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.
Backports the following commits to 7.x: