javascript - JS - How to optimize the return of an array when updating records

Question

I have a large array of objects in javascript (about 400 records). This is data about chat rooms with users (there is a lot of data in them).

Records are sorted before being returned:

export const getters = {
  getRooms(state) {
    return orderBy(state.rooms.list, 'users_online', 'desc');
  }
}

And so far everything is ok. But recently I added live data. Through websockets I receive updated information about a specific room.

//Component
mounted() {
    this.$echo.channel("rooms").listen(".RoomUpdated", (e) => {
      this.SET_ROOM(e.room);
    });
},

// Vuex
SET_ROOM(state, room) {
   state.rooms[room.id] = room;
},

And everything is fine, but when a lot of updates come (sometimes even 50 in 5-10 seconds) the page starts to get stuck (because 1 update = 1 return of sorted data). What can I do to prevent the page from jamming?

Maybe a good solution would be to return sorted records once every 5 seconds (of course only if there was a record update) instead of every record update?

But how can I achieve it? Or maybe there are better ways to solve it?

Please do not write to me to add lodash debounce to SET_ROOM method, because then not all records are updated, only one for 5 seconds.

Answer 1

等待大神答复