Add Virtualization Support for Large JSON Objects

[yashpandit]

Problem Description

When rendering large JSON objects (e.g., 1000+ keys or deeply nested structures), the component causes significant performance degradation, making the page laggy and unresponsive. All DOM nodes are rendered immediately, even those not visible in the viewport.

Current Behavior

• All JSON nodes are rendered to the DOM immediately
• Large objects (1000+ keys) cause noticeable UI lag
• Scrolling becomes janky with large datasets
• Memory usage increases linearly with object size
• Browser can become unresponsive during initial render

Expected Behavior

• Only visible nodes should be rendered (windowing/virtualization)
• Smooth scrolling regardless of JSON size
• Constant memory usage regardless of object size
• Fast initial render time

Minimal Reproduction

import JsonView from '@uiw/react-json-view';
import { useState, useEffect } from 'react';

function App() {
  const [largeObject, setLargeObject] = useState({});

  useEffect(() => {
    // Generate a large object with 5000 keys
    const obj: Record<string, any> = {};
    
    for (let i = 0; i < 5000; i++) {
      obj[`key_${i}`] = {
        id: i,
        name: `Item ${i}`,
        description: `Description for item ${i}`,
        metadata: {
          created: new Date().toISOString(),
          modified: new Date().toISOString(),
          tags: ['tag1', 'tag2', 'tag3'],
          nested: {
            level1: {
              level2: {
                level3: {
                  data: `Deep nested data ${i}`
                }
              }
            }
          }
        }
      };
    }
    
    setLargeObject(obj);
  }, []);

  return (
    <div style={{ height: '100vh', padding: '20px' }}>
      <h1>Large JSON Performance Test</h1>
      <p>Object size: {Object.keys(largeObject).length} keys</p>
      
      <div style={{ height: 'calc(100vh - 100px)', overflow: 'auto', border: '1px solid #ccc' }}>
        <JsonView
          value={largeObject}
          displayDataTypes={false}
          displayObjectSize={false}
          collapsed={1} // Collapse by default
        />
      </div>
    </div>
  );
}

export default App;

Steps to Reproduce

1. Create a new React app with @uiw/[email protected]
2. Use the above code example
3. Open browser DevTools Performance tab
4. Start recording and wait for component to render
5. Try scrolling through the JSON view

Proposed Solution

Implement virtualization using one of these approaches:

Option 1: React Window / React Virtual

Use a proven virtualization library to render only visible nodes:

import { FixedSizeList } from 'react-window';

// Pseudo-code example
<FixedSizeList
  height={600}
  itemCount={visibleNodes.length}
  itemSize={24}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>
      <JsonNode node={visibleNodes[index]} />
    </div>
  )}
</FixedSizeList>

Option 2: Custom Virtualization

Implement a custom windowing solution that:

1. Tracks scroll position
2. Calculates visible range of nodes
3. Renders only nodes within viewport + buffer
4. Maintains proper scroll height with padding elements

Benefits

• ✅ Handles objects with 10,000+ keys smoothly
• ✅ Constant memory usage regardless of JSON size
• ✅ 60 FPS scrolling performance
• ✅ Fast initial render (< 100ms)
• ✅ Better user experience for data-heavy applications

Environment

• Package version: @uiw/[email protected]
• React version: ^18.3.1
• Browser: Chrome 131, Firefox 133, Safari 18
• OS: macOS, Windows, Linux

Additional Context

Many similar libraries have implemented virtualization:

• react-json-tree - Uses react-virtualized
• jsoneditor - Custom virtualization
• Monaco Editor - Built-in virtualization for JSON mode

Workarounds Currently Used

1. Pagination: Breaking large objects into smaller chunks (poor UX)
2. Lazy loading on expand: Loading children only when expanded (complex state management)
3. Limiting display: Only showing first N items (data loss)
4. External viewers: Opening in separate tools (context switching)

None of these are ideal solutions compared to built-in virtualization.

---

Would love to see virtualization support in this library! Happy to contribute to implementation if you'd like to provide guidance on the preferred approach. 🚀

[vothanhdat]

Hi! I’d like to share an alternative solution I’ve been working on that might help with this issue.

I built react-obj-view, a lightweight React component for rendering objects with smooth expand/collapse behavior and good performance on large or deeply nested data.

Repo: https://github.com/vothanhdat/react-obj-view
Demo & docs included.

Key differences:

• Virtualized tree rendering to keep UI responsive with large objects
• Full keyboard navigation support
• Custom renderers for keys/values
• Minimal dependencies, works in React 18+ and 19

Not suggesting it as a replacement for this package, but it could be useful for people facing performance constraints or needing more control over the UI.

If any of these ideas are interesting, I’m happy to contribute code or open a discussion about bringing similar optimizations here.