title: Set state twice in onChange ReactJS
body: <p>I have the following snippet of React that I can't get to work right.  Essentially I'm displaying a spinner based on the state of this onChange call (due to the update sometimes taking 3-5 seconds).  However, the first call to set state seems to go unnoticed (or as I'm researching being batched up) and therefore the state of loading is never updated.  This is part of a toggle/switch a user can select infinite times on a page (if they desired obviously).</p>
  <pre><code>  const [state, setState] = useState({ loading: false });  
    const onToggleChange = () =&gt; {
      setState(prevState =&gt; {
        return {
          ...prevState,
          loading: true,
        };
      });
      console.log(&quot;loading1: &quot; + JSON.stringify(state));
  
      // this takes a long time depending on the users actions
      setFilterMode(!filterChecked);
  
      setState(prevState =&gt; {
        return {
          ...prevState,
          loading: false,
        };
      });
      console.log(&quot;loading2: &quot; + JSON.stringify(state));
    };
  </code></pre>
  <p>I've reviewed the current questions/answer (which is how I got as far as the above), but it still doesn't load correctly.</p>