Virtualization in React Diagram Component

21 Oct 20258 minutes to read

Virtualization is a performance optimization technique that significantly improves diagram rendering and interaction speed, particularly when working with large-scale diagrams containing hundreds or thousands of nodes and connectors.

Understanding Virtualization in Diagram

Virtualization enhances diagram performance by implementing on-demand loading of diagramming objects. Only the nodes and connectors currently visible within the diagram’s viewport are rendered and processed, while objects outside the visible area remain unloaded until they enter the view during scrolling or panning operations.

This selective rendering approach provides substantial performance benefits:

• Reduced Memory Usage: Only visible objects consume memory resources.
• Faster Initial Load: Diagrams render quickly regardless of total object count.
• Smooth Interactions: Dragging, zooming, and panning remain responsive.
• Scalable Performance: Performance remains consistent as diagram size increases.

When to Enable Virtualization

Virtualization is recommended for diagrams that meet any of these criteria:

• Contain 100 or more nodes and connectors.
• Experience performance issues during scrolling or zooming.
• Require frequent updates to large datasets.
• Display complex organizational charts, network diagrams, or flowcharts.

Enabling Virtualization

To activate virtualization, include the Virtualization constraint in the diagram’s constraints property. The virtualization feature works in conjunction with the diagram’s scrolling capabilities to manage object loading dynamically.

To enable virtualization in a diagram, you need to include the virtualization constraint in the diagram’s constraints. For more information, refer to the diagram constraints.

The following code illustrates how to enable Virtualization mode in the diagram.

function App() {
  return (
    <DiagramComponent
      id="container"
      width={700}
      height={600}
      //Enable virtualization in diagram
      constraints={
        DiagramConstraints.Default | DiagramConstraints.Virtualization
      }
    />
  );
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);

index.jsx

import * as React from "react";
import * as ReactDOM from 'react-dom';
import { DiagramComponent, DiagramConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {

    // Function to create nodes for the diagram
    function createNodes() {
        const nodes = [];
        const nodeWidth = 50;
        const nodeHeight = 50;
        const space = 50;
        const nodesPerRow = 50;
        const totalNodes = 500;

        // Loop to create the specified number of nodes
        for (let i = 0; i < totalNodes; i++) {
            // Calculate row and column index for positioning
            const row = Math.floor(i / nodesPerRow);
            const col = i % nodesPerRow;

            // Create a node object
            const node = {
                id: `node${i + 1}`,
                width: nodeWidth,
                height: nodeHeight,
                offsetX: col * (nodeWidth + space) + nodeWidth / 2,
                offsetY: row * (nodeHeight + space) + nodeHeight / 2,
                style: { fill: '#6BA5D7', strokeColor: 'white' },
                annotations: [{ content: `${i + 1}` }],
            };
            nodes.push(node);
        }

        return nodes;
    }

    return (
        // Initialize Diagram component
        <DiagramComponent
            id="container"
            width={"100%"}
            height={600}
            //Enable virtualization in diagram
            constraints={DiagramConstraints.Default | DiagramConstraints.Virtualization}
            nodes={createNodes()}
        />
    );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render(<App />);

index.tsx

import * as React from "react";
import * as ReactDOM from 'react-dom';
import { DiagramComponent, NodeModel, DiagramConstraints } from "@syncfusion/ej2-react-diagrams";

export default function App() {

  function createNodes() {
    // Function to create nodes for the diagram
    const nodes: NodeModel[] = [];
    const nodeWidth = 50;
    const nodeHeight = 50;
    const space = 50;
    const nodesPerRow = 50;
    const totalNodes = 500;

    // Loop to create the specified number of nodes
    for (let i = 0; i < totalNodes; i++) {
      const row = Math.floor(i / nodesPerRow);
      const col = i % nodesPerRow;

      // Create a node object
      const node: NodeModel = {
        id: `node${i + 1}`,
        width: nodeWidth,
        height: nodeHeight,
        offsetX: col * (nodeWidth + space) + nodeWidth / 2,
        offsetY: row * (nodeHeight + space) + nodeHeight / 2,
        style: { fill: '#6BA5D7', strokeColor: 'white' },
        annotations: [{ content: `${i + 1}` }],
      };
      nodes.push(node);
    }
    return nodes;
  }

  return (
    // Initialize Diagram component
    <DiagramComponent
      id="container"
      width={"100%"}
      height={600}

      //Enable virtualization in diagram
      constraints={DiagramConstraints.Default | DiagramConstraints.Virtualization}
      nodes={createNodes()}
    />
  );
}

// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render(<App />);