title: correctly debouncing a call onChange to update using react-monaco-editor
body: <p>EDIT:</p>
  <p><a href="https://stackoverflow.com/questions/59383595/how-to-debounce-a-controlled-input">this question</a> 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.</p>
  <p>-----END EDIT-----</p>
  <p>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.</p>
  <p>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.</p>
  <p>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.</p>
  <pre class="lang-js prettyprint-override"><code>// 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
  }) =&gt; {
  
    const debouncedUpdate = useRef(debounce(updateCode, debounceInterval)).current;
  
    const getUpdateMethod = () =&gt; {
      switch (updateMethod) {
        case UPDATE_METHODS.DEBOUNCE.value:
          return debouncedUpdate;
        case UPDATE_METHODS.THROTTLE.value:
          return throttledUpdate;
        case UPDATE_METHODS.MANUAL.value:
          return ({ code, selectedFile }) =&gt; 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 &lt;MonacoEditor updateCode={getUpdateMethod()} /&gt;;
  
  };
  
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// 
  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() {
      &lt;MonacoEditor
        ref=&quot;monaco&quot;
        language={language}
        theme=&quot;vs-dark&quot;
        defaultValue=&quot;&quot;
        value={selectedFile.content}
        options={MONACO_DEFAULT_OPTIONS}
        onChange={this.onChange}
        editorWillMount={this.editorWillMount}
        editorDidMount={this.editorDidMount}
      /&gt;
    }
  
  }
  </code></pre>