Таблица на 100k строк: с 8 секунд до <1с

Панель скоринга показывала до 100 000 лидов в одной таблице. На проде это превращалось в 5–8 секунд белого экрана при каждом открытии и фризы на скролле. Маркетологи ждали, нервничали и закрывали вкладку.

Где утекало время

Первая причина банальна: мы рендерили все строки сразу. Сто тысяч DOM-узлов — это десятки тысяч лейаут-пересчётов. Вторая — каждая ячейка тянула за собой тяжёлый форматтер и пересоздавала колбэки на каждый ререндер.

Самый быстрый рендер — тот, которого не было. Рисуем только то, что видно.

Что сделал

• →Виртуализация строк через react-window — в DOM живёт ~30 строк вместо 100k.
• →Мемоизация ячеек и стабильные ключи, чтобы React не пересоздавал поддеревья.
• →Дебаунс фильтров и перенос тяжёлых вычислений в Web Worker.

Итог — первый рендер за <1 секунду и плавный скролл на 60 fps. Маркетологи перестали замечать таблицу: она просто работает.