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:

import useWebSocket from 'react-use-websocket';

const [socketMessages, setSocketMessages] = useState([])
const { lastJsonMessage } = useWebSocket(path);
    
useEffect(() => {
  const processedResponse = receiveHandler(lastMessage)
  setSocketMessages([...socketMessages, processedResponse])
}, [lastMessage]);

const receiveHandler = (lastMessage) =< {
   // do receive processing on lastMessage
   return processedLastMessage
}

My issue is that messages are sometimes arriving in quick succession and new state updates are happening before existing updates are finished, causing messages to get lost.

Is there a simple way to handle this within the native functionality? Or, do i need a module to implement some form of queue?