Multiple Code Mirrors Extremely Slow

[fjur]

I am trying to load up multiple react-codemirrors on a single page to replace text inputs with smarter inputs that have autocomplete. When I load up ~10 code mirrors, the input's become extremely slow, and takes ~3 seconds to respond to user input and show it on screen.

There are other apps that are able to load that many code mirrors on a single screen and still be performant.

How do I keep performance and load multiple editors in the dom?

[jaywcjlove]

https://codesandbox.io/embed/uiwjs-react-codemirror-issues-294-v3if98?fontsize=14&hidenavigation=1&theme=dark

I'm not sure what is causing your problem.
@fjur

[fjur]

In my case I am managing state in a react setState and updated the state whenever onChange is called and passing it back to value. So a single state object is managing multiple states of different editors.

It seems like you are letting the editor manage the state itself and only pass the initial value, is this the correct way to do this or can I use setState to manage the editors state?

This link basically shows what I am doing (unsure why it stops after each character in codesandbox, on our app we can write multiple characters at a time but its very slow)
https://codesandbox.io/s/uiwjs-react-codemirror-issues-294-forked-uvl5ol?file=/src/App.js

[evanmays]

@fjur moving your Editor() function out of the app (to line 4) seems to fix your issue. I think react was unmounting all 6 CodeMirrors and remounting them with every edit. Which would also explain why typing one character unfocused the CodeMirror and scrolls back to top.

[fjur]

Made the change you suggested, I am still seeing performance issues after you type for awhile.

Steps to recreate:

1. Start typing, at first the performance will be fine
2. Type quite a lot of text at a fast pace, should start to see slow performance after awhile
3. Delete all the lines/code
4. performance should still be slow on new characters if you type fast

It seems if you type enough characters at a fast pace, the performance slows down, even if you delete all the characters and start anew there will be performance degradation.
If you refresh the page and then load in the state from a prior value, and then start typing, performance is fine. So performance degrades as you type, so something overtime is degrading performance.

https://codesandbox.io/s/uiwjs-react-codemirror-issues-294-forked-46uen9

[fjur]

Issue #308 address my problem, this stops re-rendering and keeps performance.