TL;DR: React spreadsheets can slow down with large Excel-like datasets. This guide covers performance optimization techniques like virtual scrolling, chunk processing, and manual formula calculation to ensure smooth, scalable web apps.
Handling large Excel-like spreadsheets in React can feel like opening a 1GB file in Notepad, slow, laggy, and frustrating. If your app struggles with rendering thousands of rows or recalculating complex formulas, this guide is for you.
The Syncfusion® React Spreadsheet (EJ2) is a robust and feature-rich tool designed to provide a familiar Excel-like experience on the web. It supports everything from formula calculations and cell formatting to importing or exporting Excel files and data binding, all while offering a smooth user interface.
By default, Syncfusion® React Spreadsheet delivers solid performance. However, as with any rich, interactive UI component, its responsiveness can be affected by large datasets, complex formulas, frequent user interactions, or heavy operations such as bulk formatting or applying numerous formulas simultaneously.
In this blog, we’ll explore practical best practices to optimize React Spreadsheet performance, ensuring a fast, smooth, and reliable experience for enterprise applications handling large Excel files and demanding workflows.
Why is performance important?
Handling large spreadsheets or complex Excel files involves processing thousands of rows and columns, multiple formulas, images, charts, and extensive formatting. This can cause:
- Slow initial rendering times when opening large files
- High memory usage leading to sluggish responsiveness
- UI freezes or lags during user interactions or recalculations
- Slow save operations for complex or bulky workbooks
By applying the right optimization techniques, you can:
- Speed up the initial load and rendering
- Reduce browser memory consumption
- Prevent UI freezing or delays
- Improve save and formula recalculation speed
How do you improve React Spreadsheet performance when loading Excel files?
Virtual Scrolling
When loading thousands of rows and columns, rendering the entire dataset into the DOM can be expensive. The React Spreadsheet component solves this using Virtual Scrolling, a performance optimization that only renders the cells visible in the current viewport.
Additional rows or columns are dynamically rendered and unloaded as the user scrolls. This approach:
- Reduces initial DOM size and memory consumption
- Improves initial rendering speed significantly
- Delivers smooth scrolling and interaction even with large datasets
Virtual Scrolling is enabled by default but can be customized for different scenarios.
Performance metrics details for loading a file with 100,000 data sets:
| With virtualization | Without virtualization |
| ~6 seconds | It takes longer than 1.30 minutes, and sometimes the application crashes. |
Note: To learn more, refer to the documentation .
Chunk response processing
Handling large Excel files in web apps can be challenging. When files contain thousands of rows, complex formulas, extensive formatting, or charts, the payload size sent from the server to the client can become huge, causing slow loading or even failures due to browser or server limitations.
Chunk response processing is a built-in feature in the React Spreadsheet that mitigates this by splitting the server response into smaller chunks and sending them in parallel. The client then assembles these chunks progressively.
This approach:
- Prevents memory overload on the client
- Improves stability and reliability when opening huge files
Enabling chunk response processing can make a noticeable difference if you’re dealing with large files and want a seamless user experience.
Note: You can find setup instructions and more details in the official documentation
Serialization options
The React Spreadsheet Control provides serialization options that exclude specific features, such as styles, formats, charts, images, wrapping, and more, from the workbook JSON object when opening it using the openFromJson method.
This approach is particularly useful in scenarios where:
- You need only the raw data without any formatting.
- You are opening the workbook JSON object using the openFromJson method.
- You want to reduce the JSON payload size and optimize processing speed.
Utilizing serialization options effectively can help speed up loading times and reduce memory usage, enabling smoother spreadsheet operations.
Performance metrics details for loading a file with 100,000 formatted data set:
| With serialization options | Without serialization option |
| ~6 seconds | ~11 seconds |
To learn how to configure these serialization and deserialization options, check out the official documentation here:
Configuring threshold limits
When importing large Excel files into the Spreadsheet component, performance can be impacted due to the size and complexity of the data. To address this, you can configure threshold limits for both the maximum number of cells ( MaximumDataLimit ) and the file size ( MaximumFileSize ). These limits help prevent delays and avoid potential server timeouts by restricting the import of excessively large files.
If these thresholds are exceeded, the Spreadsheet will display an alert dialog notifying the user that the file size or data volume is large:
- Clicking Cancel will abort the import process.
- Clicking OK will proceed with opening the file despite the large size.
Refer to the following image.
You can set the MaximumDataLimit and MaximumFileSize on the server side using code similar to the following example:
public IActionResult Open(IFormCollection openRequest)
{
OpenRequest open = new OpenRequest();
open.File = openRequest.Files[0];
open.Guid = openRequest["Guid"];
// Set maximum allowed number of cells
open.ThresholdLimit.MaximumDataLimit = 1000000; // 1,000,000 cells
// Set maximum allowed file size in bytes (e.g., 5MB)
open.ThresholdLimit.MaximumFileSize = 5000000;
var openbook = Content(Workbook.Open(open));
return openbook;
}
How can React Spreadsheet performance be improved during formula calculations?
Manual calculation mode
Manual calculation mode is a performance optimization feature in the React Spreadsheet that allows you to delay formula recalculations until they are explicitly triggered. By default, the Spreadsheet recalculates formulas automatically whenever a dependent cell changes. While this default behavior is suitable for small datasets, it can cause noticeable lag or UI freezing when working with large spreadsheets containing many formulas or complex calculation dependencies.
Manual calculation mode gives developers control over when recalculations happen, which is particularly useful during bulk operations such as importing data, applying formatting, or setting multiple formulas.
When to use manual calculation mode?
- Importing large Excel or JSON files with formula-intensive sheets
- Performing bulk updates, such as programmatically modifying rows or columns
- Applying formulas dynamically across a large number of cells
- Postponing calculations until all changes are finalized for improved responsiveness
Manual Calculation Mode in Spreadsheet
Note: To learn more about manual calculation mode and how to enable it, refer to the official documentation
How can you improve save performance in a Spreadsheet?
Handling large file saves with the isFullPost option
When saving large Excel files that contain extensive data and features using File → Save As or the save method, the Spreadsheet component triggers a server API call through a form submit operation. This process can lead to performance challenges such as timeouts or delays, especially when dealing with complex and large workbooks.
To address these issues during the save operation, you can set the isFullPost property to false within the beforeSave event. This reduces the payload sent to the server, thereby improving performance and minimizing the chance of request failures.
Performance metrics details for saving a file with 100,000 formatted data set:
| With isFullPost set to false | With isFullPost set to true |
| ~19 seconds | ~43 seconds |
The following code example shows how to set isFullPost to false in the Spreadsheet component:
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
function App() {
const spreadsheetRef = React.useRef(null);
const beforeSave = (args) => {
args.isFullPost = false;
}
return (
<div className='control-section spreadsheet-control'>
<SpreadsheetComponent
openUrl='https://services.syncfusion.com/react/production/api/spreadsheet/open'
saveUrl='https://services.syncfusion.com/react/production/api/spreadsheet/save' ref={spreadsheetRef} beforeSave={beforeSave} >
</SpreadsheetComponent>
</div>
);
}
By configuring this option, you can ensure smoother and more reliable save operations for large Excel workbooks.
Configure JSON serialization options during save
Serialization options in the React Spreadsheet allow you to exclude specific features, such as styles, formats, charts, images, wrap settings, and more from the Workbook JSON object when saving it using the saveAsJson method.
This approach is especially beneficial when:
- You need only the raw data without formatting.
- You are saving the Workbook JSON object using the saveAsJson method.
- You want to minimize the size of the JSON payload and optimize processing speed.
Using serialization options effectively during save operations helps improve overall performance and reduces the time required for saving.
Performance metrics details for saving a file with 100,000 formatted data set:
| With serialization options | Without serialization option |
| ~14 seconds | ~43 seconds |
Note: For detailed instructions on configuring these options, please refer to the official documentation.
How to improve cell selection performance in the Spreadsheet?
Disabling the showAggregate option
When working with large datasets in the React Spreadsheet, user interactions such as selecting a large range of cells can experience noticeable delays. This is because, by default, the Spreadsheet performs aggregate calculations (such as SUM, AVERAGE, COUNT, MIN, and MAX ) on the selected range and displays the results in the sheet tab panel at the bottom-right corner.
To improve responsiveness during cell selection, especially in performance-critical scenarios, you can disable these aggregate calculations by setting the showAggregate property to false.
Benefits
- Reduced lag when selecting large data ranges
- Avoidance of real-time computation of summary formulas for large selections
- Improved UI responsiveness during extensive selection operations
Before disabling the aggregate:
After disabling the aggregate:
The following code example demonstrates how to disable aggregate calculation in the Spreadsheet component:
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
function App() {
const spreadsheetRef = React.useRef(null);
return (
<div className='control-section spreadsheet-control'>
<SpreadsheetComponent ref={spreadsheetRef} showAggregate={false} >
</SpreadsheetComponent>
</div>
);
}
Note: Skipping unnecessary features can significantly improve performance, particularly when working with large or complex workbooks.
Conclusion
Thanks for reading this blog! Performance optimization is essential for delivering a responsive, enterprise-grade spreadsheet experience in React. The Syncfusion® React Spreadsheet component is designed to handle complex Excel scenarios efficiently, but performance optimization becomes crucial for large datasets and intensive operations.
You can significantly improve your application’s responsiveness and stability by leveraging the features and best practices described above, such as virtual scrolling, chunk response processing, manual calculation mode, threshold limits, and serialization options.
These optimizations empower developers to build scalable, enterprise-grade web applications with Excel-like capabilities that delight users. Try them out and share your valuable feedback in the comments section below!
For our existing customers, the new version of Essential Studio® is readily available on the license and download page, enabling you to stay at the forefront of innovation. If you’re new to Syncfusion®, sign up for our 30-day free trial to explore the full spectrum of our features.
Should you have any inquiries or require assistance, our dedicated support forum, support portal, or feedback portal is always available. We’re committed to ensuring your success every step of the way!
Related Blogs
- Custom Formulas in Spreadsheet: A Practical Guide for React Developers
- How to Deploy Spreadsheet Server on AWS EKS with Docker for React
- How to Deploy Syncfusion Spreadsheet Docker Image with ASP.NET Core 8.0
- Host Open and Save Services for JavaScript Spreadsheet with ASP.NET Core and Docker
This article was originally published at Syncfusion.com.
Top comments (0)