The uphill climb of making diff lines performant - The GitHub Blog

GitHubのFiles changedタブのReactベースの実装におけるdiff行のパフォーマンス最適化について。 1行あたり10〜15個のDOM要素と8〜13個のReactコンポーネントが必要だった構造を最適化している。 コンポーネント数を2個に削減し、イベントハンドラをdata属性を活用した単一のハンドラに集約するなどの変更をした。 TanStack Virtualによる仮想化の導入、重いCSSセレクタの削除、ドラッグ/リサイズ処理の再実装などでパフォーマンスを改善している。