即使在渲染组件后，React function 组件仍在更新最新数据

Question

I have created a simple app to build a messaging app using socket. The problem which I am facing is that whenever I receive the notification from the sever about the message, message does data does not display even after rendering the screen. Can you please help me to figure it out why its not updating the new message length even after rendering the screen.

//Updating socket object and initializing the state

  var socket = io("http://localhost:5000");
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);

//Receive message from server 

  socket.on("server", (message) => {
    messages.push(message); 
    setMessages(messages); //Updating the state to re-render the screen - **does not render(Issue)**
  });

//Setting entered message on the screen - this renders fine

 const SetYourMessage = (event) => {
    event.preventDefault();
    setMessage(event.target.value);
  }

//On click on the button - screen render and update clear the the input field

 const callApi = (e) => {

    e.preventDefault();    
    socket.emit("chatMessage", message);
    setMessage('');
  }


**// Render part of the function component**

return (
    <div className="App"> 
      <header className="App-header">    
       {alert("Message length", messages.length)}   // This show the updated length
        <label>{messages.length}</label> **//Here updating the message length to check whether received the message or not (does not show thw updated value)**
        <input  value={message} onChange = {SetYourMessage} style={{border: '1px solid black', 
        outline:'none', backgroundColor: 'white', width:'300px', height: '30px'}}/>
        <button onClick={callApi}> Press Here</button>
      </header>
    </div>
  );
}

Thanks

Answer 1

you will need to create a new reference of message array, otherwise React it will think that the array is the same since it has the same reference

socket.on("server", (message) => {
  setMessages([...messages, message]);
});