title: React useState hook updating inconsistently
body: <pre><code>function Blackjack() {
    const [deck, setDeck] = useState([]);
    const [playerHand, setPlayerHand] = useState([]);
    const [dealerHand, setDealerHand] = useState([]);
  
    function resetDeck() {
      const suits = [&quot;S&quot;, &quot;H&quot;, &quot;C&quot;, &quot;D&quot;];
      const values = [
        &quot;A&quot;,
        &quot;2&quot;,
        &quot;3&quot;,
        &quot;4&quot;,
        &quot;5&quot;,
        &quot;6&quot;,
        &quot;7&quot;,
        &quot;8&quot;,
        &quot;9&quot;,
        &quot;10&quot;,
        &quot;J&quot;,
        &quot;Q&quot;,
        &quot;K&quot;,
      ];
  
      let newDeck = [];
  
      for (let s of suits) {
        for (let v of values) {
          newDeck.push(v + s);
        }
      }
  
      setDeck(newDeck);
  
      return newDeck;
    }
  
    function deal() {
      let curDeck = resetDeck();
  
      let player = [];
      let dealer = [];
  
      for (let i = 0; i &lt; 4; i++) {
        let randIndex = Math.trunc(Math.random() * curDeck.length);
        let card = curDeck[randIndex];
        curDeck.splice(randIndex, 1);
        if (i &lt; 2) player.push(card);
        else dealer.push(card);
      }
  
      setPlayerHand(player);
      setDealerHand(dealer);
      setDeck(curDeck);
    }
  
    function hit() {
      let curDeck = deck;
      let curPlayerHand = playerHand;
  
      let randIndex = Math.trunc(Math.random() * curDeck.length);
      let card = curDeck[randIndex];
      curDeck.splice(randIndex, 1);
  
      curPlayerHand.push(card);
  
      setDeck(curDeck);
      setPlayerHand(curPlayerHand);
    }
  
    return (
      &lt;div&gt;
        &lt;div&gt;{dealerHand}&lt;/div&gt;
        &lt;button onClick={deal}&gt;Deal&lt;/button&gt;
        &lt;button onClick={hit}&gt;Hit&lt;/button&gt;
        &lt;button&gt;Stand&lt;/button&gt;
        &lt;div&gt;{playerHand}&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Blackjack;
  </code></pre>
  <p>I am trying to learn how to use React and I have come across a strange issue when using the <code>useState()</code> hook. When I click the <code>deal</code> button it renders the <code>dealerHand</code> and <code>playerHand</code> properly. However when I click the <code>hit</code> button nothing changes. The state does appear to change after some time when I inspect the components in the console, however it is very slow. Even after the state is changed, the displayed values still remain the same. What am I missing?</p>