React page is 'lagging' when typing in a rich text editor

Question

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

Answer 1

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