title: Set state twice in a single function - ReactJS
body: <p>I have a function that sets state twice, however - the second <code>setState</code> has to occur after 500ms since first <code>setState</code> has occured (animation purposes).</p>
  
  <p>Code looks like:</p>
  
  <pre><code>const showAnimation = () =&gt; {
     this.setState({ hidden: false });
  
     setTimeout(() =&gt; {
        this.setState({ hidden: true });
     }, 500);
  };
  </code></pre>
  
  <p><strong>However</strong> - if I do it this way, React somehow merges these two <code>setState</code>'s into one and my animation doesn't work as expected.</p>
  
  <p>But, if I use a hack:</p>
  
  <pre><code>const showAnimation = () =&gt; {
     setTimeout(() =&gt; {
        this.setState({ hidden: false });
     }, 0);  // ------------------------------&gt; timeout 0
  
     setTimeout(() =&gt; {
        this.setState({ hidden: true });
     }, 500);
  };
  </code></pre>
  
  <p>It works as expected. But still, I don't really like it and Im afraid that it may be some kind of a hack. Is there any better solution for such case? Thanks :)</p>