Optimizing Diff Render Performance for Large Pull Requests: A Step-by-Step Guide

Introduction

Pull requests are the core of code review on GitHub, but when they grow to thousands of files and millions of lines, performance can suffer dramatically. Common issues include JavaScript heaps exceeding 1 GB, DOM node counts over 400,000, and Interaction to Next Paint (INP) scores so high that users feel input lag. This guide walks you through the same strategies used by GitHub’s engineering team to make diff rendering fast and responsive at any scale. You’ll learn a multi-pronged approach—no single silver bullet—that covers focused component optimizations, graceful degradation with virtualization, and foundational rendering improvements.

Optimizing Diff Render Performance for Large Pull Requests: A Step-by-Step Guide — Source: github.blog

What You Need

A codebase with a React-based diff viewer (or similar client‑side diff component)
Performance profiling tools (Chrome DevTools Performance panel, React Profiler, memory heap snapshot tools)
Metrics to track: INP (Interaction to Next Paint), JavaScript heap size, DOM node count, and user interaction latency
A set of test pull requests ranging from small (one file) to very large (10,000+ files)
Familiarity with React hooks, memoisation, and virtualisation libraries (e.g., react-window or react-virtualized)
Access to user session replays (e.g., Datadog RUM, Sentry) to correlate metrics with real user experiences

Step 1: Profile and Categorise Your Pull Request Sizes

Before optimising, you need data. Start by measuring your current baseline:

Run performance profiles for small, medium, large, and extreme pull requests. Note the heap size, DOM count, and INP scores.
Identify the thresholds where performance degrades. In GitHub’s case, extreme PRs exceeded 1 GB heap and 400,000 DOM nodes.
Group your PRs into size categories (small, medium, large, extreme) so you can apply different strategies per category.

This step ensures you understand which areas need the most attention. Without clear metrics, you might optimise the wrong thing.

Step 2: Prioritise Focused Optimisations for Diff‑Line Components

For the majority of pull requests (small to medium), you can keep the full feature set—including native browser find‑in‑page—by optimising the diff‑line components themselves. Focus on these tactics:

Memoise every diff line component using React.memo to prevent unnecessary re‑renders when props haven’t changed.
Use stable keys for list items (e.g., file path + line number) to help React efficiently reconcile the DOM.
Lazy‑load expensive decorations like syntax highlighting or code comments only when the line is visible.
Avoid inline styles that cause re‑creation of style objects on every render; prefer CSS classes or styled components.

These small, targeted improvements compound to keep the UI responsive for reviews that are typical in everyday work.

Step 3: Implement Graceful Degradation with Virtualisation

For your largest pull requests, you need a different approach. Graceful degradation means accepting that not everything can be rendered at once. Implement virtualisation:

Use a virtualised list library (e.g., react-window) to render only the diff lines that are visible in the viewport (plus a small buffer).
When the user scrolls, dynamically render new lines and unmount off‑screen lines. This drastically reduces DOM nodes and memory.
Consider disabling certain advanced features (like inline code comments or real‑time diff highlighting) for extreme PRs, or making them available only on demand.
Measure the impact: you should see DOM nodes drop from hundreds of thousands to a few thousand, and heap size under 100 MB.

Virtualisation is the key to keeping the experience usable when a PR has hundreds of thousands of changed lines.

Step 4: Invest in Foundational Components and Rendering Improvements

Optimisations that benefit every PR size come from improving the building blocks of your diff viewer. This step compounds the gains from Steps 2 and 3:

Replace legacy class components with functional components and hooks for better performance and tree‑shaking.
Audit re‑render triggers using the React DevTools Profiler. Eliminate unnecessary re‑renders in parent components that cause cascading updates.
Use useMemo and useCallback judiciously for expensive calculations and callback props passed to diff lines.
Break down monolithic diff components into smaller, composable pieces that can be independently optimised.
Consider moving persistent state (like expanded/collapsed files) to a context or state management library with fine‑grained subscriptions to avoid re‑rendering unrelated parts of the UI.

These foundational improvements reduce the overall rendering cost, making both normal and virtualised modes faster.

Step 5: Test, Monitor, and Iterate

Performance optimisation is an ongoing cycle. After implementing the changes:

Re‑run the same profiles from Step 1 and compare metrics. Verify that INP scores, heap size, and DOM node counts have improved.
Deploy to a canary or experimental group and collect real‑user metrics. Use session replays to catch any regressions.
Monitor for edge cases—for example, very long single lines that still cause performance issues even with virtualisation.
Iterate: adjust buffer sizes, virtualisation thresholds, and memoisation logic based on data.

Remember, there is no end to optimisation. Keep an eye on new React features (like concurrent mode) that could further improve responsiveness.

Tips for Success

Start with measurement – don’t guess where the bottlenecks are. Always profile before and after changes.
Don’t sacrifice the everyday experience for extreme optimisations. Ensure that small and medium PRs remain snappy and feature‑complete.
Test with realistic large PRs – create or use synthetic loads that mimic your largest real‑world examples.
Combine strategies – no single approach works for all sizes. Use focused optimisations for most PRs and virtualisation only when needed.
Document your thresholds – decide at what PR size you switch to virtualised mode, and why. This helps future developers understand the tradeoffs.
Keep an eye on third‑party dependencies – some libraries (like syntax highlighters) can be heavy. Consider lazy loading them.
Communicate with your team – performance improvements affect user experience. Share before/after metrics to highlight the wins.

Tags: