Pull requests are the beating heart of GitHub. As engineers, we spend a good chunk of our time reviewing changes, and at GitHub's scale—where pull requests can range from tiny one-line fixes to massive changes spanning thousands of files and millions of lines—the review experience must stay fast and responsive. Recently, we shipped a new React-based experience for the Files changed tab (now default for all users), targeting improved performance, especially for large pull requests. This article breaks down the key strategies we used, from focused component optimizations to graceful degradation through virtualization, to conquer the uphill climb of making diff lines performant.
1. The Performance Challenge: When Large Diffs Break the Browser
Before optimization, most pull requests were zippy, but the largest ones caused serious slowdowns. In extreme cases, the JavaScript heap would exceed 1 GB, DOM node counts surpassed 400,000, and interactions became sluggish or even unusable. Interaction to Next Paint (INP) scores—a key responsiveness metric—rose above acceptable levels, making input lag noticeable. This wasn't just a theoretical issue; users felt it when scrolling, clicking, or typing in diff views. Our goal was to tame this for large PRs without sacrificing the everyday experience.
2. No Single Silver Bullet: A Multi-Pronged Strategy
We quickly realized no single fix would solve all problems. Techniques that preserve every feature and browser-native behavior hit a ceiling for extreme diffs. Conversely, mitigations designed only for worst cases could harm typical reviews. So we developed a set of targeted approaches, each tailored to pull request size and complexity. These strategies focused on three themes: focused optimizations for diff-line components (keeping medium and large reviews fast without breaking find-in-page), graceful degradation with virtualization (limiting rendered content for the largest PRs), and foundational rendering improvements (benefiting every PR size).
3. Focused Optimizations: Making Diff-Line Components Lean
We zeroed in on the core diff-line components that render each changed line. By optimizing their rendering logic and reducing unnecessary re-renders, we made the primary diff experience efficient for the majority of pull requests. For example, we avoided heavy computations during scroll and used memoization to cache unchanged views. These tweaks kept medium and large reviews fast without sacrificing expected behaviors like native browser find-in-page. The result: smoother scrolling and lower memory usage for most users, especially those reviewing PRs with a few hundred files.
4. Graceful Degradation: Virtualization for the Biggest Diffs
For the largest pull requests—those with thousands of files and millions of lines—we implemented virtualization. This technique limits what is rendered on-screen at any moment, prioritizing responsiveness and stability over showing every line at once. When a PR crosses a size threshold, the diff view switches to a virtualized mode that only renders visible lines, with a placeholder for off-screen content. That dramatically cuts DOM nodes and heap memory, even for the most extreme cases. Users can still navigate and scroll seamlessly, but without the browser bogging down.
5. Foundational Component & Rendering Improvements
Beyond targeted fixes, we invested in foundational upgrades that compound across every pull request size. This included rewriting core UI components in React with better lifecycle management, reducing unnecessary context providers, and lazy-loading non-critical assets. These improvements lowered baseline memory consumption and improved interaction latency even for small PRs. Because these changes are applied everywhere, regardless of which mode a user ends up in, they provide a consistent performance boost. The net effect: faster page loads, lower INP scores, and a more responsive experience for all users.
In summary, by combining focused component optimizations, graceful degradation via virtualization, and foundational rendering improvements, we transformed the Files changed tab. The JavaScript heap and DOM counts dropped dramatically, INP scores fell into acceptable ranges, and even the largest pull requests became usable again. These improvements are now live for all GitHub users, making the review process smoother than ever.