React app fails to process websocket message under high frequency of messages - reactjs

Question

I have the following code that subscribes to a socket. I have noticed that under high frequency of messages, the display_data state sometimes falls out of sync. This occurs despite the client receiving all the messages in sequential order. Could this happen because React is setting the state in an asynchronous and mutable way? Are multiple messages being processed at the same time?
Would a better model for processing data to put the incoming messages into a client side queue and then process each item in the queue sequentially, removing item after processing, and then update the state? If this is ideal, how can I do this?
const client = new w3cwebsocket('ws://localhost:5424');
export class DataManager extends React.Component {
constructor(props) {
super(props);
this.state = {
display_data: {},
key_count: 0,
pipe_count: 0,
data_schema: data_schema
};
client.onopen = () => {
console.log('WebSocket connected!');
};
}
componentDidMount() {
client.onmessage = (message) => {
this.processIncomingMessage(message.data);
}
}
processIncomingMessage(message) {
let message_json = JSON.parse(message);
let message_type = message_json['type'];
let message_time = message_json['update_time'];
let message_data = message_json['data'];
let total_keys = message_json['total_keys'];
if (message_type === 'sync') {
this.setState({
display_data: message_json['data'],
});
} else {
let data = Object.assign({}, this.state.display_data);
Object.keys(message_data).forEach(index => {
data[message_data[index]['key']] = 1;
});
this.setState({
display_data: data,
});
console.log(message_json['pipe_count'], Object.keys(data).length, total_keys);
}
this.setState({
pipe_count: this.state.pipe_count + 1,
key_count: Object.keys(this.state.display_data).length
});
}
componentWillUnmount() {
client.close();
}
}