Борьба с постоянной перерисовкой React приложения

Когда еще работал Frontend разработчиком, поступило техническое задание: Создать клиентское web приложение, в котором идет вывод объектов с их актуальными статусами.

Было решено использовать React + Redux + Socket.io.

И тут началась беда. У пользователей с минимальным числом объектов работало приложение стабильно. Но если добавить пользователю примерно 1000 объектов, то при нагрузки на Socket.io (при слушании событий) происходила жесткая заморозка. До тех пор, пока не отработают все обращения к dispatch в слушателе событий.

Было так:

channel.listen((item) => dispatch(updateObject(item)));

Было решено использовать очередь для накопления данных и дальнейшей перерисовки.

Стало:

const queue = useQueue((items) => dispatch(updateObjects(items)));

channel.listen((item) => queue.addQueue(item));

Хук очереди useQueue

Работа хука состояла в принятии функции обратного вызова, которая будет обрабатывать накопленный массив данных. Также можно задавать задержку выполнения процесса и максимальный стек накопленных данных.

export default function useQueue(callback, timeout = 500, maxCount = 500) {
    let pid = null,
        items = [];

    return {
        addQueue(item) {
            clearTimeout(pid);

            items.push(item);

            if (items.length >= maxCount) {
                callback(items);

                items = [];
            } else {
                pid = setTimeout(() => {
                    callback(items);

                    items = [];

                    clearTimeout(pid);
                }, timeout);
            }
        },
    };
}

Ссылка на пример

Спасибо за прочтение! Надеюсь кому-то пригодится данный подход решения.