My project involves creating cards (like flashcards) that involve React Ace to write or edit code. A user's home page can have more than one flashcard. (For working project check here - https://visit-sparkle.apricity.co.in. There is a "demo" section for those who prefer TL;DR)
Now, while these cards load alright, there is a major performance implication which I believe is due to non-passive event handling by React-ace which is resulting in a blocking piece of code that slows down my page's rendering very very badly.
Code to reproduce:
<AceEditor
mode="python"
theme="dracula"
name={`CodeEditor-1`}
onChange={this.handleCodeChanges}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={this.props.code}
readOnly={!this.props.editState}
height='150px'
width='100%'
editorProps={{ $blockScrolling: false}} //I've tried this but does not seem to help
/>
Google is suggesting to enforce an object with {passive: true} to radically improve performance. How can we enable this with React-Ace? Their documentation does not seem to help.
Appreciate all help. Thanks