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.

Sign up for GitHub

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

Jump to bottom

Monaco perf improvement: Update the editor focus only when its prop value has changed #5607

Open
vivek1729 opened this issue Oct 1, 2021 · 0 comments
Open

Monaco perf improvement: Update the editor focus only when its prop value has changed #5607

vivek1729 opened this issue Oct 1, 2021 · 0 comments

Comments

@vivek1729
Copy link
Contributor

To update editor's focus state, we check if the passed in prop is true and if the editor is not already focused:

nteract/packages/monaco-editor/src/MonacoEditor.tsx

Lines 382 to 385 in d2088d0

// Set focus
if (editorFocused && !this.editor.hasTextFocus()) {
this.editor.focus();
}

Imagine a scenario where the passed in prop is true but the editor was already focused. We can see that we'd still end up calling the core hastTextFocus api which can lead to low level dom queries and potential layout thrashing.

This can be optimized by checking prevProps, following a similar pattern:

nteract/packages/monaco-editor/src/MonacoEditor.tsx

Lines 317 to 321 in d2088d0

// Ensures that the source contents of the editor (value) is consistent with the state of the editor
// and the value has actually changed.
if (prevProps.value !== this.props.value && this.editor.getValue() !== this.props.value) {
this.editor.setValue(this.props.value);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@vivek1729