1

If I type very fast, the rich text editor lags while updating. If I hold down the a key, the text editor doesn't update and page freezes until I lift up the key. I have tried using both Mantine text editor and Slate text editor. Both of them don't lag when I'm using it on their docs website itself.

I have also isolated my text editor into a single file but it still won't work.

import React, {useState} from 'react'
import {RichTextEditor} from '@mantine/rte'

function TextEditor() {

  const [val, setVal] = useState('')
  return (
    <RichTextEditor value={val} onChange={setVal}></RichTextEditor>
  )
}

export default TextEditor

I have also just rendered this file in my index.js file to test if my other components are affecting performance. But nope it didn't work, still lagging.

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import TextEditor from './TextEditor';

ReactDOM.render(
  <React.StrictMode>
    <TextEditor />
  </React.StrictMode>,
  document.getElementById('root')
);

For reference, the documentations/demos for the rich text editors I used are here:

Mantine: https://mantine.dev/others/rte/#demo

Slate: https://www.slatejs.org/examples/richtext

xmuhs
  • 96
  • 1
  • 9
  • You have to use debouncing approaching to avoid freezing issue. https://stackoverflow.com/questions/23123138/perform-debounce-in-react-js – Muhammad Muzamil Mar 28 '22 at 06:42
  • @MuhammadMuzamil That worked! I also used lodash's debounce function to do this instead of the answer in your link. Thanks! – xmuhs Mar 28 '22 at 06:59

1 Answers1

2

You have to use debouncing approach to avoid freezing issues either using loadash or a custom approach. Please check the following link to get solution stack link debounce in reactjs

Muhammad Muzamil
  • 1,013
  • 2
  • 18
  • 25