Fix layout inspector re-rendering all elements on all changes

Summary:
Changelog: [Layout] Addressed several performance issues in the layout plugin

This diff and a few of the next stuff fix some performance issues in the Layout plugin. This diff fixes an issue where computing the context menu will cause all rows to render at all times, make the responiveness of the plugin quite slugish.

The fix in this case is to build up the context menu lazily, and pass a stable ref to the function through the tree, rather than a new menu every time the root component renders.

The changes in this diff and the next ones in total reduces the time (in prod builds) to draw a frame from ~200ms to ~5ms.

Reviewed By: cekkaewnumchai

Differential Revision: D27685983

fbshipit-source-id: a48b2ce2cdd1db31bb13122924617cbc3b6c198a
This commit is contained in:
Michel Weststrate
2021-04-15 07:46:28 -07:00
committed by Facebook GitHub Bot
parent e29222fba7
commit 7d9495027b
3 changed files with 13 additions and 7 deletions

View File

@@ -458,7 +458,7 @@ export default class Inspector extends Component<Props, State> {
root={this.root()}
elements={this.elements()}
focused={this.focused()}
contextMenuExtensions={this.getAXContextMenuExtensions()}
contextMenuExtensions={this.getAXContextMenuExtensions}
/>
{selectorData && selectorData.leaves.length > 1 ? (
<MultipleSelectorSection