镜像站点 · 本页由第三方 GitHub 只读镜像提供,非 GitHub 官方站点,不接受任何登录或凭据输入。前往 github.com
Skip to content

Built-in virtual list support #102

Open

Description

@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.

Activity

  1. daleperforce commented on Feb 25, 2022

    @daleperforce

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

  2. otakustay commented on Feb 28, 2022

    @otakustay
    OwnerAuthor

    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

  3. otakustay commented on Feb 28, 2022

    @otakustay
    OwnerAuthor

    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

  4. VinayakJadhav123 commented on Jul 11, 2023

    @VinayakJadhav123

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions