correctly debouncing a call onChange to update using react-monaco-editor

Question

EDIT:

this question sums up my issue pretty well: monaco editor takes the current value from the state, while debounce prevents the state to trigger. How can I allow a user to continue typing uninterrupted without making unnecessary calls to update the code.

-----END EDIT-----

ok so I have a react app (no CRA) that uses react-monaco-editor as a code editor panel. when a user types the onChange event is fired and I would like to call a debounced update action but this is not working right now.

The setup is not exactly straight forward but I have a parent component, CodeEditorPanel, which has a child component, monacoEditor. I have removed as much code which is not directly related to the question as possible but can add more details if required.

using updateCode with auto mode (UPDATE_METHODS.AUTOMATIC.value) works just fine but it is computationally expensive but when I use debounced mode (UPDATE_METHODS.DEBOUNCE.value) the changes are messed up and seem like they are using old values (it sounds like what would happen if I was not using useRef but I am.). Anyways, something is (not so) obviously not right and I would appreciate any help to spot my (what is hopefully, minor) error.

// CodeEditorPanel.js
import React, { useRef } from 'react';

const CodeEditorPanel = ({
  updateMethod, // editor setting, user can choose: automatic, manual, throttled, debounced
  updateCode, // the update action I want to debounce
}) => {

  const debouncedUpdate = useRef(debounce(updateCode, debounceInterval)).current;

  const getUpdateMethod = () => {
    switch (updateMethod) {
      case UPDATE_METHODS.DEBOUNCE.value:
        return debouncedUpdate;
      case UPDATE_METHODS.THROTTLE.value:
        return throttledUpdate;
      case UPDATE_METHODS.MANUAL.value:
        return ({ code, selectedFile }) => updateCode({ code, selectedFile, buffer: true });
      case UPDATE_METHODS.AUTOMATIC.value:
      default:
        return updateCode;
    }
  };

  // in reality there is a function call before update getUpdateMethod but I'm trying to simplify
  return <MonacoEditor updateCode={getUpdateMethod()} />;

};

// 
class monacoEditor extends Component {

  onChange(newValue, e) {
    const { selectedFile, updateCode } = this.props;

    // want to debounce this bad boy right here
    updateCode({ code: newValue, selectedFile });
  }

  render() {
    <MonacoEditor
      ref="monaco"
      language={language}
      theme="vs-dark"
      defaultValue=""
      value={selectedFile.content}
      options={MONACO_DEFAULT_OPTIONS}
      onChange={this.onChange}
      editorWillMount={this.editorWillMount}
      editorDidMount={this.editorDidMount}
    />
  }

}

Answer 1

I have come up with one solution that works for me but I am still interested if others have ideas.

So what I did was:

1. create a local state variable in my component and initialize to the code prop.
2. in the onChange method, instead of calling the action creator, I update local state.
3. I added an idle timer to the component set to one second. So if the user stops typing for one second, it will call the action creator to update redux.

Answer 2

My approach is two-fold:

1. If immediate action is needed (e.g. code completion) then I execute the task on each change.

2. If an action can be delayed (e.g. error checking) then the actual change doesn't matter. In that case I start a timer (which is reset on each change) and runs the required actions, once it fires. No need to keep state in this case, since it is not necessary.

Of course, if the actual change still matters (say, to limit an action to a certain range that got modified since the last run) then you would of course need to store it (or a derived value, like a range).

Answer 3

React MonacoEditor

I have also one idea to get react monacoeditor value without called onChange event. create reference of MonacoEditor.

this.editorRef = React.createRef();

after that add reference to MonacoEditor tag.

<MonacoEditor
   ref={this.editorRef}
   height="500px"
   language="json"
   // editorDidMount={this.editorDidMount.bind(this)}
   // onChange={this.onChange.bind(this)}
   value={this.state.code}
   options={options}
 />

Then after add button and create function for onClick event as below code

 async saveData(){
    const currentCode = this.editorRef.current.editor.getModel().getValue();
    this.setState({code:currentCode});
    this.editorRef.current.editor?.focus();

  }

you will get updated value of editor by clicking save button.

Answer 4

I had the same issue too, I wanted to execute a function in editor's onChange that it writes the value to the url, but it had conflict with onChange state and made the cursor sudden moves to end of the editor.

This is my approach that solved the problem:

As @cbutler mentioned first create a local state variable in my component and initialize to the code prop.

const [currentConfig, setCurrentConfig] = useState<string>(config);

then in the onChange method, instead of calling the action creator, update local state.

 const handleEditorChange: OnChange = (value) => {
    setCurrentConfig(value || "");
};

<Editor
 defaultValue={config}
 value={config}
 onMount={editorDidMount}
 height="100%"
 width={"100%"}
 defaultLanguage="yaml"
 theme="vs-dark"
 options={{
 quickSuggestions: { other: true, strings: true },
 automaticLayout: true,
 minimap: { enabled: false },
 scrollbar: { verticalScrollbarSize: 5 },
 padding: { top: 10 },
 }}
 onChange={handleEditorChange}
/>

Finally added this useEffect piece of code:

useEffect(() => {
    onChangeConfig(currentConfig);
}, [currentConfig]);