title: React setState and use the value to update another state
body: <p>I have a simple roll the dice code and I want to update the score based on the dice roll.</p>
  <p>This is the states of the dices and the scores:</p>
  <pre><code> const [Dice1, setDice1] = useState(0);
   const [Dice2, setDice2] = useState(0);
  
   const [Score1, setScore1] = useState(0);
   const [Score2, setScore2] = useState(0);
  
   function randomNum() {
        setDice2(Math.floor(Math.random() * 6) + 1);
        setDice1(Math.floor(Math.random() * 6) + 1);
        Dice1 &gt; Dice2 &amp;&amp; Dice1 !== Dice2 ? setScore1(Score1 + 1) : Dice2 &gt; Dice1 &amp;&amp; Dice1 !== Dice2 ? setScore2(Score2 + 1) : setScore2(Score2 + 0);
   }
  </code></pre>
  <p>The function randomNum is triggered on click.</p>
  <pre><code> return (
        &lt;div className=&quot;App&quot;&gt;
             &lt;header className=&quot;App-header&quot;&gt;
                  &lt;p&gt;Player 1 rolls {Dice1}&lt;/p&gt;
                  &lt;p&gt;Player 2 rolls {Dice2}&lt;/p&gt;
                  &lt;button onClick={randomNum}&gt;Roll the dice&lt;/button&gt;
                  {Dice1 &gt; Dice2 ? &lt;p&gt;Player 1 win&lt;/p&gt; : Dice1 === Dice2 ? &lt;p&gt;Draw&lt;/p&gt; : &lt;p&gt;Player 2 win&lt;/p&gt;}
                  &lt;p&gt;Player 1 score is {Score1} points&lt;/p&gt;
                  &lt;p&gt;Player 2 score is {Score2} points&lt;/p&gt;
                  &lt;button onClick={resetScore}&gt;Reset score&lt;/button&gt;
             &lt;/header&gt;
        &lt;/div&gt;
   );
  </code></pre>
  <p>Everything works well, except that the score if updated with 1 round lag.
  Everytime I roll, it is added the point from the last round.
  What am I'm doing wrong here?</p>
  <p><a href="https://i.stack.imgur.com/zS3Fp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zS3Fp.png" alt="enter image description here" /></a></p>