I have a React app that connects to a WebSocket using react-use-websocket. Messages are received asynchronously, processed by receiveHandler and then the socketMessages state is updated with the response. Sample code:

Here’s my component, what happens is I connect to my websocket and listen for incoming messages from the server and display them. Whenever my message list exceeds 10 messages, I slice the first element and add the new one. My array confirmed does not exceed a length of 10 elements, and the data of each message is fairly small.