title: How to update the state only when user start typing in text editor?
body: <p>I have below code related to text editor and i am only interested to set the state of editor when user start typing the text in editor.</p>
  <p>Need to update the state only for below scenario:-</p>
  <p>1 Update the state only when user start typing the text in text editor.</p>
  <p>2.Update state when user start typing the text in text in text editor but he removed the entire text whatever he entered previously. In that case also wanted to update the state.</p>
  <p>3.Don't want to update the state when user hasn't start typing in text editor.</p>
  <p>I have use react quill for text editor in next JS. This is next JS project.</p>
  <pre><code>import {useState} from &quot;react&quot;;
  const ReactQuill = dynamic(() =&gt; import(&quot;react-quill&quot;), { ssr: false });
  import &quot;../../node_modules/react-quill/dist/quill.snow.css&quot;;
  
  const CreatePost = () =&gt; {
   const blogFormLS = () =&gt; {
      if (typeof window === &quot;undefined&quot;) {
        return false;
      }
      if (localStorage.getItem(&quot;blog&quot;)) {
        return JSON.parse(localStorage.getItem(&quot;blog&quot;));
      } else {
        return false;
      }
    };
   const [body, setBody] = useState(blogFormLS());
   const [values, setValues] = useState({
      error: &quot;&quot;,
      sizeError: &quot;&quot;,
      success: &quot;&quot;,
      formData: &quot;&quot;,
      title: &quot;&quot;,
    });
  const handleChange = (name) =&gt; (e) =&gt; {
      formData.set(name);
      setValues({ ...values, [name]: value, formData, error: &quot;&quot; });
    };
  
    const handleBody = (e) =&gt; {
      setBody(e);
      formData.set(&quot;body&quot;, e);
      if (typeof window !== &quot;undefined&quot;) {
        localStorage.setItem(&quot;blog&quot;, JSON.stringify(e));
      }
    };
  return () {
  &lt;&gt;
   &lt;form onSubmit={publishBlog}&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;lable className=&quot;text-muted&quot;&gt;Title&lt;/lable&gt;
            &lt;input
              type=&quot;text&quot;
              value={title}
              className=&quot;form-control&quot;
              onChange={handleChange(&quot;title&quot;)}
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;ReactQuill
              value={body}
              placeholder=&quot;Write something amazing...&quot;
              onChange={handleBody}
              modules={CreatePost.modules}
              formats={CreatePost.formats}
            /&gt;
          &lt;/div&gt;
  &lt;/form&gt;
  &lt;/&gt;
  }
  }
  
  CreatePost.modules = {
    toolbar: [
      [{ header: &quot;1&quot; }, { header: &quot;2&quot; }, { header: [3, 4, 5, 6] }, { font: [] }],
      [{ size: [] }],
      [&quot;bold&quot;, &quot;italic&quot;, &quot;underline&quot;, &quot;strike&quot;, &quot;blockquote&quot;],
      [{ list: &quot;ordered&quot; }, { list: &quot;bullet&quot; }],
      [&quot;link&quot;, &quot;image&quot;, &quot;video&quot;],
      [&quot;clean&quot;],
      [&quot;code-block&quot;],
    ],
  };
  
  CreatePost.formats = [
    &quot;header&quot;,
    &quot;font&quot;,
    &quot;size&quot;,
    &quot;bold&quot;,
    &quot;italic&quot;,
    &quot;underline&quot;,
    &quot;strike&quot;,
    &quot;blockquote&quot;,
    &quot;list&quot;,
    &quot;bullet&quot;,
    &quot;link&quot;,
    &quot;image&quot;,
    &quot;video&quot;,
    &quot;code-block&quot;,
  ];
  
  export default CreatePost;
  </code></pre>