Как адекватно отрендерить более 10000 data rows используя react?
Ребята, всем привет. Есть относительно простая задача, которая не так проста в реализации. Есть компонент, который по-сути представляет из себя лист, в котором хранятся пользователи(10000+). При изначальном mount компонента делается запрос на сервер, который выдает 100 значений. Далее по мере скролла вниз грузятся новые данные(лимит пагинации - 100 за раз). Каждое значение обернуто в ReactCSSTransitionGroup, что дает небольшую анимацию и дает бэкграунду небольшой highlight для визуализации новых отрендеренных данных.
Проблема в том, что по достижении 400+ значений(компонентов User в списке), рендеринг выдает неплохую задержку и юзабилити в несколько раз ниже нужного. Получается, что каждый раз, когда мы конкатенируем старый store и новый массив со значениями, каждый компонент все равно рендерится еще раз. Как в таком случае рендерить только новые, только что полученные данные с сервера, и потом склеивать их с теми, что уже в store, но при этом не допускать повторного рендеринга?
P.S. все моменты с key и т.п. - улажены корректно. Спасибо за ответ! :)
Средний
