Waiting to render when typed quickly

[ozanbatuhanceylan]

Hi, I am facing an issue about performance. When i type quickly i have to wait about 200ms to 500ms for the editor to render my expressions. I have checked the example page of repository (https://uiwjs.github.io/react-codemirror/) and realized that the same issue occurs there.

Is there a way to improve performance while i am consuming the wrapper or is this a render issue in the implementation of wrapper?

PS. I don't know if it is related but when i type a character cm-editor regenerate a class name that contains "min-height, height, max-height, width, min-width, max-width" css rules. Is it necessary to regenerate class name but i think it is render impact on DOM

Thanks in advance

[puckwang]

Hi,

I have the same problem. I think it's because each render creates a new theme object. This problem exists in useCodeMirror.ts.

The solution is to avoid creating a theme (EditorView.theme) in the component or using useMemo.

[jaywcjlove]

@puckwang @ozanbatuhanceylan

import CodeMirror from '@uiw/react-codemirror';

export default function App() {
  const [code, setCode] = useState('');
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
-      onChange={setCode}
    />
  );
}

https://codesandbox.io/embed/react-codemirror-example-codemirror-6-uiwjs-react-codemirror-issues-390-forked-g3rbtw?fontsize=14&hidenavigation=1&theme=dark

It's a matter of controlled value props

@puckwang @ozanbatuhanceylan

[kasvith]

i'm having the same issue with controlled value props. editor lags when we type more text

[kasvith]

are there any workarounds @jaywcjlove

[kasvith]

i think we can solve this by introducing an initialValue prop. this way we wont need to do a document update as in here

https://github.com/uiwjs/react-codemirror/blob/6f14c51c109333acbc394a09d981b411ac37d397/core/src/useCodeMirror.ts#L164