title: React Hooks - useState does not update "Saving...", "Saved" states immediately
body: <p>I'm using React Hooks and I'm creating a page such that users can make changes to their account and save it. When the page loads, I want the button to be disabled because the page will show the previously saved information and there's no need to save since no changes were made. Once the user makes a change, I have a validate() function that will check if whatever changes they made are valid. If they are then, the button should be enabled. When the user clicks the save button, the button should be disabled and &quot;Saving&quot; should show. Once it's done saving, the button should still be disabled and &quot;Saved&quot; should show.</p>
  <p>I have 3 state variables that are initialized like so (disableButton is true at first because the button is disabled on landing the page).</p>
  <pre><code>const [saved, setSaved] = useState(false);
  const [isSubmitting, setSubmitting] = useState(false);
  const [disableButton, setDisableButton] = useState(true);
  </code></pre>
  <p>I used setState when certain events occur, for example, when the user clicks the save button:</p>
  <pre><code>const handleSubmit = async () =&gt; {
      setSaved(false);
      setSubmitting(true);
      setDisableButton(true);
  ...
  }
  </code></pre>
  <p>I noticed that these changes aren't made immediately, but the next time it renders, which is a problem for me. I looked into useEffect as well, but I'm not sure if it will work in my case (or maybe I'm just not seeing a pattern). I'm new to React so any help would be appreciated.</p>