Auto save in ReactJS using setTimeout

auto-save-react-new-code.js

import RichText from "../controls/rich_text";

const SavingState = Object.freeze({
  NOT_SAVED: 0,
  SAVING: 1,
  SAVED: 2
});

class TextQuestion extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "",
      saving: SavingState.NOT_SAVED
    };

    this.update = this.update.bind(this);
    }

    componentDidMount() {
      this.timer = null;
    }

    update(text) {
      clearTimeout(this.timer);
      this.setState({ text, saving: SavingState.NOT_SAVED });

      this.timer = setTimeout(() => {
        this.setState({ text, saving: SavingState.SAVING });

        // calls API
        callAPIToSaveText({ answer: text }).then(() => this.setState({ saving: SavingState.SAVED }));
      }, 500);
    }

  render() {
    <RichText.NoToolbar editorClass="small" value={this.state.text} onChange={this.update} />
    <AutoSaveDisplay saving={this.state.saving} />
  }
}
  
const AutoSaveDisplay = ({ saving }) => {
  let display;
  switch (saving) {
    case SavingState.SAVING:
      display = <em>saving...</em>;
      break;
    case SavingState.SAVED:
      display = (
        <>
          <Icon check /> <em>saved!</em>
        </>
      );
      break;
    default:
      display = <br />;
  }
  return <div className="auto-save-display">{display}</div>;
};
AutoSaveDisplay.propTypes = {
  saving: PropTypes.oneOf(Object.values(SavingState))
};

// styles I use for auto-save-display
// .auto-save-display {
//  display: block;
//  height: 25px;
//}