React-ace: Browser is stuck and Memory keeps raising after typing in editor

Created on 6 Jul 2017 · 4Comments · Source: securingsincity/react-ace

Problem

set maxLines as 1 or 2, with onLoad set wrap mode as true at the same time, click before the last curly brace and type Enter button to make the editor formatting automatically, you will find the browser stuck and the memory raising.

Sample code to reproduce your issue

<AceEditor
      mode="json" maxLines={2} value={"{\"a\":\"b\"}"}
      onLoad={editor => editor.getSession().setUseWrapMode(true)}
/>

or visit the simple project react-ace-editor-issuse

References

Initial memory and CPU
tim 20170706095723
10 sec after type Enter button
tim 20170706095813

Progress on: #
Win 10 / Chrome 58&IE 11/ React 15.6.1

bug unable to reproduce

Source

SecMao

👍1

Most helpful comment

i am using React v16.4, react-ace v6.1.2

setup with create-react-app
and test with code below, setting AceEditor with maxLines and wrapEnabled

class App extends React.Component {
  render() {

    const props = {
      mode: 'javascript',
      theme: 'monokai',
      value: 'const test = \'hello loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text\'',
      maxLines: 1,
      wrapEnabled: true,
    };

    return (
      <div>
        <AceEditor {...props} />
      </div>
    );
  }
}

and it will cause cpu and memory raising

hirohe on 28 Jun 2018

👍2

All 4 comments

We considered moving away from https://github.com/JedWatson/react-codemirror because at least at the moment it is not maintained well (aka the maintainer does not merge or reacts to PRs) but this here is a blocker that stops that.

inoas on 12 Jul 2017

@SecMao I'm unable to reproduce on my mac. I'll need to find a Windows laptop to reproduce.

@inoas were you able to reproduce this issue? I see a few comments mentioning that you were looking to switch from codemirror but it's unclear if you saw these issues locally.

securingsincity on 18 Jul 2017

We haven't made the move just yet and will try to reproduce this if we do and report back in either case (no leak or "looks like" leak)

inoas on 19 Jul 2017

i am using React v16.4, react-ace v6.1.2

setup with create-react-app
and test with code below, setting AceEditor with maxLines and wrapEnabled

class App extends React.Component {
  render() {

    const props = {
      mode: 'javascript',
      theme: 'monokai',
      value: 'const test = \'hello loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text\'',
      maxLines: 1,
      wrapEnabled: true,
    };

    return (
      <div>
        <AceEditor {...props} />
      </div>
    );
  }
}

and it will cause cpu and memory raising

hirohe on 28 Jun 2018

👍2

Was this page helpful?

0 / 5 - 0 ratings