Autosave editor notes with onchange event hook

Question

Found a solution for autosaving with Quill text editor: CodePen Went on trying to fit it to React hooks useState, see beneath. Got an error with this solution:

"State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect()."

Any ideas how I could have the onChange still trigger the autosaving with Hooks state?

  const [timeOut, setTimeOut] = useState(null);
  const [notesWritten, setNotesWritten] = useState(''); // Value:
  const [saved, setSaved] = useState('');


  const resetTimeout = (id, newID) => {
    clearTimeout(id);
    return newID;
  };

  const saveValue = () => {
    setSaved(true);
    setTimeOut(() => setSaved(false), 1000);
  };

  const editValue = (textWritten) => {
    setTimeOut(resetTimeout(timeOut, setTimeOut(saveValue, 400)), setNotesWritten(textWritten));
  };


  return (
      <ReactQuill
        value={notes}
        // onChange={value => onChange(value)}
        onChange={(value) => {
          onChange(value);
          editValue(value);
        }}
      />
  )

Patrik Rikama-Hinnenberg Patrik Rikama-Hinnenberg · Accepted Answer · 2019-08-08T13:06:44

Found a solution, by picking apart the nested setStates: this.setState({timeout: resetTimeout(this.state.timeout, setTimeout(this.saveValue, 400)), value: value}) from the original solution. Like this:

  const [timeOutValue, setTimeOutValue] = useState(null);
  const [notesWritten, setNotesWritten] = useState(''); // Value:

  const resetTimeout = (id, newID) => {
    clearTimeout(id);
    return newID;
  };

  const saveValue = () => {
    saveNotes();
  };

  const editValue = (textWritten) => {
    setTimeOutValue(resetTimeout(timeOutValue, setTimeout(saveValue, 1000)));
    setNotesWritten(textWritten);
  };

return (
      <ReactQuill
        value={notes}
        // onChange={value => onChange(value)}
        onChange={(value) => {
          onChange(value);
          editValue(value);
        }}
      />
  )

Autosave editor notes with onchange event hook

1 Answers