How GitHub Made Diff Lines Fast Again

GitHub rebuilt the React-based architecture behind its Files changed tab to address serious performance degradation in large pull requests, where JavaScript heap usage could exceed 1 GB, DOM node counts surpassed 400,000, and Interaction to Next Paint (INP) scores made the UI feel sluggish or unresponsive. Rather than pursuing a single fix, the team adopted multiple strategies tailored to different pull request sizes: targeted optimizations for diff-line components, graceful degradation via virtualization for the largest diffs, and foundational rendering improvements that benefit all cases.

In the original v1 implementation, each diff line required roughly 10-15 DOM elements, 8-13 React components, and over 20 event handlers—an architecture that worked fine at small scale but compounded badly across thousands of lines. The v2 redesign eliminated redundant wrapper components by giving split and unified views their own dedicated components, cutting per-line component count from eight to two. Event handling was consolidated into a single top-level handler using data attributes instead of per-line mouse listeners, and complex state for comments and context menus was moved into conditionally rendered child components so the core diff-line component could focus solely on rendering code.

The changes illustrate how, at GitHub's scale, even small optimizations—like removing two unnecessary DOM nodes per line—translate into tens of thousands of fewer nodes across large diffs, offering a concrete case study in performance engineering for React-heavy, high-scale UIs.