setState in onChange will block the editor

  onChange(newValue) {
    this.setState({ code: newValue });
    console.log('change', this.state.code);
  }

[brendanmcgivern]

@mbrochstein I was able to find a workaround by using Reacts shouldComponentUpdate method.

shouldComponentUpdate(nextProps, nextState) {
    if (this.state.aceEditorValue !== nextState.aceEditorValue) {
      return false
    } else {
      return true;
    }
  }

Then for my onChange method for the <AceEditor />

onChange = (newValue) => {
    this.setState({
      aceEditorValue: newValue
    });
  }

This will update the state of aceEditorValue with whatever is entered into the editor without re-rendering the entire component. Works for my use case.

[PavelPolyakov]

Well, this is a huge bug and it is still there. I tried to use react-ace with https://github.com/jaredpalmer/formik and behaviour is the same, it just stucks.

<AceEditor
mode="yaml"
theme="solarized_light"
onChange={value => {
  setFieldValue("content", value);
}}
tabSize={2}
editorProps={{ $blockScrolling: true }}
value={''}
width="100%"
/>

upd This looks not nice, but it worked out for me. The key issue, as I understand, is that you better not set state or do anything with the value right from the ace’s onChange (inline). You better do it in the different component’s function.

import React, { Component } from "react";
import { Formik, Form, Field } from "formik";

class AcePlusFormik extends Component {
  state = { content: "" };

  /**
   * Special treatment for ace content
   * @param {string} value
   */
  setContent(value) {
    this.setState({ content: value });
    this.setFieldValue("content", value);
  }

  render() {
    <Formik
      initialValues={{ title: "", content: "" }}
      onSubmit={values => console.log(values)}
    >
      {({ touched, setFieldValue }) => {
        this.setFieldValue = setFieldValue;
        return (
          <Form>
            <Field name="content">
              {({ field }) => (
                <React.Fragment>
                  <AceEditor
                    mode="yaml"
                    theme="solarized_light"
                    onChange={value => {
                      this.setContent(value);
                    }}
                    tabSize={2}
                    editorProps={{ $blockScrolling: true }}
                    value={this.state.content}
                    width="100%"
                  />
                  <input type="hidden" {...field} />
                </React.Fragment>
              )}
            </Field>
            <button
              className="button is-primary is-pulled-right"
              style={{ marginTop: "10px" }}
              type="submit"
            >
              Save
            </button>
          </Form>
        );
      }}
    </Formik>;
  }
}