Fix JSON diff viewer performance issue causing UI freeze with large p… by sneha0099 · Pull Request #19 · keploy/react-diff-viewer

sneha0099 · 2025-09-03T07:12:07Z

Fixes #18

optimized functions.
for large payload data.
now can load 15k line data.

Screen.Recording.2025-09-03.011242.online-video-cutter.com.mp4

…ayloads Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

Copilot

Pull Request Overview

This PR optimizes the JSON diff viewer to handle large payloads by implementing virtual rendering with chunked loading to prevent UI freezes. The key improvements focus on performance enhancements that allow the component to display 15k+ lines of data smoothly.

Implements chunked rendering with progressive loading using requestIdleCallback
Optimizes core diff computation functions by replacing array methods with for-loops and improving data structures
Refactors render logic to use iterative approaches instead of functional array methods

Reviewed Changes

Copilot reviewed 4 out of 8 changed files in this pull request and generated 3 comments.

File	Description
src/index.tsx	Adds chunked rendering state management and progressive loading logic to prevent UI blocking
src/compute-lines.ts	Optimizes diff computation performance by replacing forEach/map with for-loops and using Set for lookups
lib/index.js	Compiled JavaScript output reflecting the TypeScript changes in index.tsx
lib/compute-lines.js	Compiled JavaScript output reflecting the TypeScript optimizations in compute-lines.ts

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-03T07:13:49Z

+  if (
+    visibleNodes.length < computeLineInformation(
+      oldValue,
+      newValue,
+      this.props.noise,
+      this.props.disableWordDiff,
+      this.props.compareMethod,
+      this.props.linesOffset,
+    ).lineInformation.length
+  ) {


The computeLineInformation function is called on every render to check if more chunks need loading. This expensive computation should be cached or moved to avoid repeated calculations during progressive rendering.

Copilot · 2025-09-03T07:13:49Z

+requestIdleCallback?.(() => {
+  this.setState((prev) => ({
+    renderedChunks: prev.renderedChunks + 1,
+  }));
+});


Multiple requestIdleCallback calls could be queued simultaneously during fast renders, leading to unnecessary state updates. Consider debouncing or checking if a callback is already pending before scheduling another one.

Copilot · 2025-09-03T07:13:50Z

+  if ((oldString.startsWith('{') || oldString.startsWith('[')) &&
+      (newString.startsWith('{') || newString.startsWith('['))) {
+    try {
+      JSON.parse(oldString);
+      JSON.parse(newString);
+      isJSON = true;
+    } catch {
+      isJSON = false;


JSON detection logic is too simplistic. Strings that start with '{' or '[' but aren't valid JSON will still attempt JSON parsing, potentially causing performance issues with large invalid JSON-like strings. Consider adding a more robust JSON detection or limiting the size of strings that undergo JSON parsing attempts.

Sarthak160 · 2025-09-03T08:00:56Z

@sneha0099 Please check the failing tests and look into the copilot comments

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

sneha0099 · 2025-09-03T09:52:21Z

Key Changes:

Chunked Rendering & State Management
Implements progressive loading to render large diffs in smaller chunks.
Prevents UI blocking and freezing when handling massive payloads.
Adds state management to track and control incremental rendering.

Optimized Diff Computation

Replaces forEach and map with traditional for loops for better performance.
Uses Set for lookups instead of arrays to reduce time complexity for large datasets.
Minimizes unnecessary computations to improve overall diff calculation speed.

sneha0099 · 2025-09-05T13:46:26Z

Used virtual window
That renders the data on demand when user scrolls to the bottom
It can render 100k lines without any freeze now
It inserts data to dom and removes when the user moves or scrolls to bottom
So it wont store all the data and wont make it laggy.

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

sneha0099 · 2025-09-08T18:35:42Z

Issue:
- If we have large test report data, Then currently this is freezing the UI
- Because it is loading all data once and that's expensive and time consuming and blocking performance and all data is added in dom directly.
Fix:
- To solve this I've rendered data on demand using react window, when the user scrolls then new data is added in dom and when user scrolls again old data is removed from dom as this is not visible now.
- This can now load 100k lines without any freeze.
  100k lines of expected and 100k lines of actual data can be compared and can show the diffs without any freeze.
- used one unifiedGutter function instead of separate gutter functions
- loaded data based on size:
- if the size is <700 then it wont render virtually and can see it directly
- for 700 to 100k line size it renders using virtualization.

for <700 lines

Screen.Recording.2025-09-08.172756.mp4

for 700 to 100k lines

Screen.Recording.2025-09-09.231846.mp4

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

manasmanohar · 2025-09-23T05:35:10Z

@sneha0099 please look into the failing pipeline

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

manasmanohar

@sneha0099 could you please fix the failing pipeline as well with this pr. Having the test pipeline will help catch bugs earlier going ahead.

sneha0099 · 2025-12-19T06:34:40Z

@manasmanohar

it is giving this
Running self-installer...
Error: Something went wrong, self-installer exits with code 1
Installation Completed!

what can be the issue? Have you any idea because it's only giving something went wrong.
the solution's is working fine i ran this locally using this library

Fix JSON diff viewer performance issue causing UI freeze with large p…

bbb0e1a

…ayloads Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

Copilot AI review requested due to automatic review settings September 3, 2025 07:12

Copilot AI reviewed Sep 3, 2025

View reviewed changes

change the line format from LF to CRLF

6dafcac

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

load large payload of 100k lines with the help of virtualization

ed1e0e2

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

sneha0099 added 2 commits September 9, 2025 19:06

fix alignment between gutter and row and line number

2862a80

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

fix: change the threshold value of virtualization

c8f76d7

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

sneha0099 added 2 commits October 6, 2025 18:36

fix: align the title with diff

a526c7a

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

fix: noise mode spacing of lines

467c5a0

Signed-off-by: Sneha Prajapati <snehaprajapati678@gmail.com>

manasmanohar suggested changes Dec 19, 2025

View reviewed changes

Navigation Menu

Uh oh!

Uh oh!

Fix JSON diff viewer performance issue causing UI freeze with large p… - #19

Fix JSON diff viewer performance issue causing UI freeze with large p…#19
sneha0099 wants to merge 7 commits into
keploy:masterfrom
sneha0099:fix-json-diff-viewer-causing-UI-freeze-with-large-payloads

sneha0099 commented Sep 3, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 3, 2025

Uh oh!

Copilot AI Sep 3, 2025

Uh oh!

Copilot AI Sep 3, 2025

Uh oh!

Sarthak160 commented Sep 3, 2025

Uh oh!

sneha0099 commented Sep 3, 2025

Uh oh!

sneha0099 commented Sep 5, 2025 •

edited

Loading

Uh oh!

sneha0099 commented Sep 8, 2025 •

edited

Loading

Uh oh!

manasmanohar commented Sep 23, 2025

Uh oh!

manasmanohar left a comment

Uh oh!

sneha0099 commented Dec 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Uh oh!

Conversation

sneha0099 commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

Sarthak160 commented Sep 3, 2025

Uh oh!

sneha0099 commented Sep 3, 2025

Uh oh!

sneha0099 commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sneha0099 commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

manasmanohar commented Sep 23, 2025

Uh oh!

manasmanohar left a comment

Choose a reason for hiding this comment

Uh oh!

sneha0099 commented Dec 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sneha0099 commented Sep 3, 2025 •

edited

Loading

sneha0099 commented Sep 5, 2025 •

edited

Loading

sneha0099 commented Sep 8, 2025 •

edited

Loading