ReactJs масштабирует сообщения Websocket

Question

В настоящее время я работаю над приложением ReactJs, которое получает сообщения от серверной части nodejs со скоростью около 100 сообщений в секунду.Когда я масштабирую сообщения примерно до 10 секунд, мои таблицы отображаются нормально и обновляются, как они должны.Однако, когда для него установлено 100 сообщений, приложение не может отобразить.

Вот мой компонент таблицы, который устанавливает соединение с веб-сокетом и прослушивает сообщения

const ws = new WebSocket("ws://localhost:7770");

class SortedTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      sortedInfo: {
        order: 'descend',
        columnKey: 'value',
      }
    };
  }

  //Handle socket setup
  componentDidMount = () => {
    ws.onopen = () => {
      ws.send('init');
    };
    ws.onmessage = (e) => {
      let message = null;
      try {
        message = JSON.parse(e.data);
      } catch (e) {
        console.log('malformed message');
      }
      if (message) {
        let seenIdFlag = false;
        message.key = message.id;
        this.state.data.map((elem, i) => {
          if (elem.id === message.id) {

            //Updating row based on incoming socket message
            const updatedRows = this.state.data.slice();
            updatedRows[i].name = message.name;
            updatedRows[i].value = message.value;
            this.setState({ data: updatedRows });
            seenIdFlag = true;
          }
        });

        //Populating initial data list with unique IDs
        if (this.state.data.length <= 99 && seenIdFlag === false) {
          this.setState({ data: this.state.data.concat([message]) });
        }
      }
    };
  }

  //Destroy socket connection
  componentWillUnmount = () => {
    ws.onclose = () => {
      ws.send('close');
    };
  }

А вот мой рендерmethod

render() {
let { sortedInfo } = this.state;
const columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Value",
    dataIndex: "value",
    key: "value",
    sorter: (a, b) => a.value - b.value,
    sortOrder: sortedInfo.columnKey === 'value' && sortedInfo.order,
  },
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  }
];

return (
  <div className="table-sorting">
    <Table columns={columns} dataSource={this.state.data} pagination={false} size="small" />
  </div>
);

}

Я делаю что-то по своей сути неправильно, что вызывает проблемы с производительностью при работе с установкой состояния сотни раз в секунду?Как вы можете видеть, я имею дело с заполнением таблицы, проверяя, был ли идентификатор определенного элемента перенесен в таблицу или нет, и как только таблица содержит 100 элементов, я проверяю, разделяет ли новое входящее сообщение какой-либо объектв моем массиве объектов состояния, а затем обновите этот элемент и установите состояние.

Является ли установка состояния, которое много раз в функции onmessage, является плохой практикой?Любая идея будет принята с благодарностью.

Просто повторяю, компонент работает нормально с 10 сообщениями в секунду, и мой компонент обновляет данные так, как должен, он только аварийно завершает работу и не обновляется при масштабировании до 100 сообщений.