The uphill climb of making diff lines performant

GitHub's engineering team details how they optimized the pull request Files Changed tab by refactoring React diff-line components. The v1 architecture had 8–13 React components and 20+ event handlers per diff line, causing JavaScript heaps exceeding 1 GB and 400,000+ DOM nodes on large PRs. The v2 redesign reduced components from 8 to 2 per line, adopted O(1) data lookups via JavaScript Maps, moved complex state to conditionally rendered children, and replaced scattered useEffect hooks with top-level handlers using data attributes. Results on a 10,000-line diff: 74% fewer rendered components, ~50% less memory, and ~78% faster INP. For p95+ pull requests (10,000+ diff lines), TanStack Virtual was integrated for window virtualization, achieving a 10x reduction in heap and DOM nodes, with INP dropping from 275–700ms to 40–80ms. Additional wins came from replacing heavy CSS selectors, GPU-accelerated drag/resize, server-side hydration of only visible lines, and progressive diff loading.