Using Websocket Live data, Page become non responsive

Question

We are working on one project where we need to broadcast real market data like Stock Market in Web browser and we are facing issue when we broadcast data to fron-tend.

Technology:

RactJS (NextJS), WebSocket

React Data Grid and DevExpress Grid

DataGrid is having 12 to 14 columns and around 150 rows.

Rows are updating within second 4 to 5 times.

Is there any solution we can display live data without impacting page response, current problem is with live data page become non responsive, to interact with page need to stop WebSocket.

Code Example of React Data Grid

const [reportData, setReportData] = useState([]);

// Connecting to Websocket
const ws = new WebSocket(ws_url);
ws.onopen = () => ws.send('Hi this is web client.')
ws.onmessage = (e) => {
    const data = Object.values(JSON.parse(e.data).data)
    setReportData(data)
}

<DataGrid columns={columns.map((col) => {
    return {
        key: col.dataField,
        name: col.caption,
    }
})} rows={reportData} className="rdg-light" style={{height: 500}} />

Data received by WebSocket looks like

{
    "service_id": 0,
    "timestamp": 1643343434,
    "data": {
      "symbol": { 
        "currency": "symbol",
        "field1": 000000.00000,
        "field2": 000000.00000,
        "field3": 93000.00000,
        "field4": 0.98765,
        ...
        "field12": 91851.45
      },
      ...
    }
  }