title: Child state not rendering properly
body: <p>I'm making a blackjack app, and I'm having trouble re-rendering hands after the initial hands. I'm trying to update my state in App.js and pass it to PlayerHand.js to be rendered, but the child component is not re rendering, even though a console.log shows that the state has been updated in App. Interestingly, if I hit ctrl-s in my text editor, PlayerHand.js will update, even if I haven't actually changed anything in the code.</p>
  <p>App.js</p>
  <pre><code>function App() {
  
    const [lobbyState, updateLobbyState] = useState('');
    const [playerHand, updatePlayerHand] = useState([]);
  
  //code that updates my state
    const hit = () =&gt; {
      socket.emit('hit', roomName, function(newCard){ hit
        console.log('old player hand is ' + playerHand);
        var newHand = playerHand;
        newHand.push(newCard);
        updatePlayerHand(newHand);
        console.log('new player hand is ' + playerHand); //this shows a different hand than the first print statement
      });
    }   
  
  //renders initial hands; seems to be working, but included in case it's relevant
  socket.on('initialHands', (data) =&gt; {
      updateRoomName(data.roomName);
      var newHand = data.playerHand;
      updatePlayerHand(newHand);
      updateOpponentHand(opponentHand.concat([data.opponentFirstCard, 'back'])); 
      updateLobbyState('started');
    })    
    
  
  switch(lobbyState){
          case 'started':
            return (
              &lt;div className=&quot;lobby&quot;&gt;
                &lt;OpponentHand opponentHand = {opponentHand}/&gt;
                &lt;PlayerHand playerHand = {playerHand} /&gt;
                {currentPlayer ? &lt;PlayerActions 
                hit={hit}
                stand={stand}
                /&gt; : &lt;h1&gt; Not your turn &lt;/h1&gt;}
                
              &lt;/div&gt;
          )
          case 'waiting':
            return (
              &lt;Waiting /&gt;
            )
          default:
            return (
              &lt;Home 
              createRoom={createRoom}
              joinRoom={joinRoom}
            /&gt;
            )
        }
  </code></pre>
  <p>PlayerHand.js</p>
  <pre><code>import React, {useState, useEffect} from 'react';
  import cards from './exports';
  function PlayerHand (props){
      const [hand, updateHand] = useState([]);
      useEffect(() =&gt; {
          var newHand = props.playerHand;
          updateHand(newHand);
      }, [props.playerHand]);
      return (
          &lt;div&gt;
              {hand.map((card) =&gt; (&lt;img src={cards[card]} alt=&quot;card&quot; className=&quot;card&quot;/&gt;))}
          &lt;/div&gt;
      )
  }
  
  export default PlayerHand;
  </code></pre>