Problem with dynamically updating a React Component within a chat project - reactjs

Question

In my chat application, I am having trouble displaying user messages after send button is pressed.
I receive all the message data from an API and store it inside a state. Here is the relevant part.
I simplified the code because I think the problem is in the logic of my code and there are no syntax errors.
const Chat = (props) => {
const [selectedRoom, setSelectedRoom] = useState({})
const [roomMessages, setRoomMessages] = useState([])
let roomMessagesData = []
function getUserRoomMessages() {
fetch("url").then((response) => {
return response.json();
}).then((requestData) => {
setRoomMessages(requestData.message_list)
});
};
function sendMessage(message) {
fetch("url").then((response) => {
return response.json();
}).then((requestData) => {
getUserRoomMessages()
});
}
function handleSendMessageButton() {
let currentMsg = document.querySelector("#textBox").value;
if (currentMsg != "") {
sendMessage(currentMsg)
roomMessagesData.push(
<div className="message receiver">{currentMsg}</div>
)
}
document.querySelector("#textBox").value = "";
}
useEffect(() => {
getUserRoomMessages()
}, [selectedRoom])
// Note that:
// typeof roomMessages !== 'undefined' will always be true,
// since initially, roomMessages = [], it is defined.
// Instead just check if roomMessages is not empty, to avoid this operation.
if (roomMessages.length > 0) {
const sortedMessages = roomMessages.sort(
(a,b)=> a.message_id > b.message_id ? 1 : -1
);
for (let i = 0; i<sortedMessages.length; i++) {
if (sortedMessages[i].creator_id == user_id) {
roomMessagesData.push(
<div className="message receiver">
{sortedMessages[i].message_text}
</div>
);
} else {
roomMessagesData.push(
<div className="message sender">
{sortedMessages[i].message_text}
</div>
);
}
};
}
return (
<div>
//some code
<div className="chatBox">{roomMessagesData}</div>
<div><input type="text" id="textBox"/></div>
<div>
<input
id="btn"
type="button"
value="Send message"
onClick={handleSendMessageButton}
/>
</div>
</div>
)
}
In this current logic, when I press send message button, the message is sent to the API successfully, but not displayed. Only after I refresh the page new message appear.
All of the calls to API are successful.
My idea is that when a user sends a new message I retrieve a newly updated list of messages from API which then should be re-rendered by reactjs. Or I want push a new element to roomMessagesData so that after it changes reactjs should reload its elements.
The question is what is the problem in my code and what is it that I have do to achieve what I described above.

Answer 1

Quick review of the steps:
So handleSendMessageButton triggers the sendMessage function which does a POST.
And then sendMessage triggers a GET message using getUserRoomMessages.
Within getUserRoomMessages, you trigger state update using setRoomMessages.
And the rendered child {roomMessagesData} is dependant on the changes within roomMessages state.
Based on the above, the issue to be fixed is here:
// ONLY re-renders if selectedRoom changes
useEffect(() => { getUserRoomMessages() }, [selectedRoom]);
Change the above to:
// re-render if roomMessages changes,
// and the message should display automatically
useEffect(() => { getUserRoomMessages() }, [roomMessages]);
Remember, that useEffect() will only run again if certain "dependant" states change.
UPDATE
Despite suggesting the above, notice that it will create infinite loop because - getUserRoomMessages makes a API call and then updates roomMessages state which the useEffect depends on to re-render the component - thus leading to neverending re-rendering and numerous API calls.
Suggestion:
Since getUserRoomMessages is already called when the onClick is triggered, thus updating date... you can instead utilize the useEffect to run only when state is updated e.g.
let loaded = React.useRef(false);
// Cleanup useEffect
useEffect(() => {
// set to true on mount...
isLoaded.current = true;
// ... and to false on unmount
return () => { isLoaded.current = false; };
}, [isLoaded, roomMessages]);

Answer 2

Right now you have defined your list using a variable let roomMessagesData = [],whereas you need to use a state to define it. later on when you change that state , your component will be updated since a state has changed.
another way to go is by deploying a useEffect hook in which you will pass roomMessagesData as the second dependancy. This way , when that array changes, your component will rerender.
useEffect(() => {
const copyRoomMessagesData = [...roomMessagesData]
}, [roomMessagesData])
<div className="chatBox">
{copyRoomMessagesData}
</div>