Ускорение просмотра изменений в GitHub через упрощение компонентов React

Одна строка кода во вкладке Files changed могла нести больше 20 обработчиков событий. На тысячах строк цена такой архитектуры росла: интерфейс тормозил, память уходила на повторяющиеся компоненты.

Команда GitHub упростила дерево React и передала обработку событий общему обработчику: он определяет строку по атрибутам HTML-элемента. Состояние комментариев и меню перенесли в дочерние компоненты, которые появляются по необходимости.

В разборе оптимизации есть замеры: на 10 000 изменённых строк задержка от действия до обновления экрана снизилась примерно с 450 до 100 мс. Тест проводили на MacBook Pro M1 с четырёхкратным замедлением. Для самых крупных изменений понадобилось ещё и отображать только видимые строки; этот подход тоже разобран в материале.

#веб