Built-in virtual list support

[otakustay]

Yes, theoretically react-diff-view supports virtual list, users can manipulate diff objects into many many hunks and have each hunk loaded by scroll, however this is not perfect:

1. Manipulating hunks isn't an easy work, this involves finding a good split point and remaining left and right side relations, especially difficult when nearbySequences: 'zip' is not enabled.
2. Guessing hunk's rendered height is still difficult, this is not a must, but a more friendly scroll height is always welcome

API

I'm planning to have a <Virtualized> component wrapping current <Diff> to enable this behavior:

<Virtualized>
  {/* Supports multiple diffs */}
  <Diff {...props} />
  <Diff {...props} />
</Virtualized>

This makes least migration efforts from previous usage.

Inside implement

Before creating a virtual list, Diff could first have a look at its hunks and all changes inside, for a diff with little code to render, just disable virtual list by default.

When a diff contains a large amount of hunks, virtual list first works on top of hunks, if a hunk contains an affordable count of changes, it is rendered with out any lazy strategies.

Only when a hunk contains a lot of changes, virtual list is enabled on change level which will behaves as a lazy render of <tr> elements.

Version

Planning to ship this in a major version no matter whether breaking changes are envolved.

[daleperforce]

Do you have any ETA on this? We are seeing really bad performance issue with large diff's.

[otakustay]

We don't have a plan to support it natively in a short term, we have very limited time and is focusing on TypeScript support currently.

Besides a built-in virtual list support, you can think hunks as a data array and make it dynamic on scrolling to add basic load on scroll behavior, this solution only works on a hunk level and will still get poor performance when a single hunk contains many changes

[otakustay]

To addition, in our own use case, we display large diffs (more than 1000 lines of changes) as a friendly "This Diff Is Large" message, and allow user to force render diff view on a click, in this way users have expectation on slow render and may wait for a longer time

[VinayakJadhav123]

Any plan on implementing this? I'm rendering large diff which is causing UI to freeze. This will really help