title: Why is my state array resetting to empty?
body: <p>For some reason, only the last element of my messages state array is rendering. Whenever I call addMessage and print the current state of messages, an empty array always prints out. After I push the new message to the state array, the array prints out with one message. Why is my messages state not properly saving and resetting to an empty array?</p>
  <pre><code>const ChatApp = () =&gt; {
    const [messages, setMessages] = React.useState([]);
  
    useEffect(() =&gt; {
      ioClient.emit('join', { roomid: roomId });
      ioClient.emit('connected', { roomid: roomId });
    }, []);
  
    ioClient.on('message', (msg) =&gt; {
      const messageObject = {
        username: msg.from,
        message: msg.body,
        timestamp: msg.timestamp
      };
      addMessage(messageObject);
    });
  
    ioClient.on('send', (con) =&gt; {
      for (var key in con.arra) {
        var value = con.arra[key];
        const messageObject = {
          username: value.from,
          message: value.body,
          timestamp: value.timestamp
        };
        addMessage(messageObject);
      }
    });
  
    const sendHandler = (message) =&gt; {
       var res = moment().format('MM/DD/YYYY h:mm a').toString();
       ioClient.emit('server:message', {
         from: senderFullName,
         body: message,
         timestamp: res,
         roomId: roomId
       });
    };
  
    const addMessage = (message) =&gt; {
      console.log(messages);
      let messagess = [...messages, message];
      setMessages(messagess);
      console.log(messagess);
    };
  
    return (
      &lt;div className=&quot;landing&quot;&gt;
        &lt;Container&gt;
          &lt;Row className=&quot;mt-5&quot;&gt;
            &lt;Col md={{ span: 8, offset: 2 }}&gt;
              &lt;Card style={{ height: '36rem' }} border=&quot;dark&quot;&gt;
                &lt;Messages msgs={messages} /&gt;
                &lt;Card.Footer&gt;
                  &lt;ChatInput onSend={sendHandler}&gt;&lt;/ChatInput&gt;
                &lt;/Card.Footer&gt;
              &lt;/Card&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      &lt;/div&gt;
    );
  };
  
  ChatApp.defaultProps = {
    username: 'anonymous'
  };
  
  const mapStateToProps = (state) =&gt; {
    return {
      authUser: state.auth.user,
      profile: state.profile.profile
    };
  };
  
  export default connect(mapStateToProps)(ChatApp);
  
  </code></pre>
  <p>Messages Component</p>
  <pre><code>import React from 'react';
  
  import Message from './Message';
  
  class Messages extends React.Component {
    componentDidUpdate() {
      // There is a new message in the state, scroll to bottom of list
      const objDiv = document.getElementById('messageList');
      objDiv.scrollTop = objDiv.scrollHeight;
    }
  
    render() {
      // Loop through all the messages in the state and create a Message component
      const messages = this.props.msgs.map((message, i) =&gt; {
          return (
            &lt;Message
              key={i}
              username={message.username}
              timestamp={message.timestamp}
              message={message.message}
              fromMe={message.fromMe} /&gt;
          );
        });
  
      return (
        &lt;div className='messages' id='messageList'&gt;
          { messages }
        &lt;/div&gt;
      );
    }
  }
  
  Messages.defaultProps = {
    msgs: []
  };
  
  export default Messages;
  </code></pre>
  <p>Message Component</p>
  <pre><code>import React from 'react';
  import Container from 'react-bootstrap/Container';
  import Image from 'react-bootstrap/Image';
  import Card from 'react-bootstrap/Card';
  import Row from 'react-bootstrap/Row';
  import Col from 'react-bootstrap/Col';
  import Button from 'react-bootstrap/Button';
  import Media from 'react-bootstrap/Media';
  
  class Message extends React.Component {
    render() {
      let now = this.props.timestamp;
  
      return (
  
        &lt;ul className=&quot;list-unstyled&quot;&gt;
                &lt;Media.Body&gt;
                  &lt;h6 className=&quot;font-weight-bold&quot;&gt;{ this.props.username }&lt;/h6&gt;
                  &lt;p&gt;
                  { this.props.message }
                &lt;/p&gt;
                  &lt;p className=&quot;small text-muted&quot;&gt;
                    {now}
                &lt;/p&gt;
                &lt;/Media.Body&gt;
              &lt;/Media&gt;
        &lt;/ul&gt;
      );
    }
  }
  
  Message.defaultProps = {
    message: '',
    username: '',
    to: '',
    fromMe: false
  };
  
  export default Message;
  </code></pre>