Non-passive event listeners resulting in "blocking" code (with React Ace) and hence causing performance issues

Question

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.

Performance cost due to this:

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

Answer 1

The message chrome displays in console is somewhat misleading, using passive mousewheel event can prevent performance issue with scrolling the element to which the event listener was attached, if the handler was performing slow task not essential for scrolling. In case of ace editor the element to which is attached the listener is not-scrollable, so the listener itself does not have any performance impact. There may be some other issue causing performance issue on your site, but i didn't notice any performance issues after creating 10 cards.

You can test this by adding before creating editors

var proto = Element.prototype
proto.addEventListener1 = proto.addEventListener1 || proto.addEventListener
proto.addEventListener = function(type, handler) { this.addEventListener(type, handler, {passive: true}) }