Performance Issue with Templates in React Grid – Request to Limit Rendering to Current Page Only

[Emrah Asma]

Hello,

I am using the React Grid component with pagination enabled. I display 50 records per page, and the total data set contains around 200 records. For some columns, I am using custom templates.

The issue I'm facing is that whenever the grid renders (e.g., after sorting, filtering, or data reload), it processes the templates for all 200 records instead of only the current page (50 records). This causes noticeable performance issues and delays in rendering.

What I would like to achieve is:
Only the rows visible in the current view (current page) should have their templates processed and rendered. The remaining rows (on other pages) should not be processed until the user navigates to those pages.

Is there a recommended way to achieve this behavior in the Syncfusion React Grid? If not, I would kindly request this feature as it would significantly improve performance in paginated grids using templates.

Thank you for your support!

Best regards,

[Kishore Muthukrishnan]

Hi ,

 

Greetings from Syncfusion support,

 

By default, the Syncfusion React Grid component is optimized for performance when using pagination, only the rows for the current page are rendered in the DOM, even when the full data set is loaded into memory. This applies to both local and remote data binding:

 

• Local Data Binding: The entire data set is present in memory, but only the current page’s rows are rendered in the DOM. This ensures efficient rendering while still allowing quick in-memory operations.
• Remote Data Binding: The Grid automatically sends pagination parameters (like skip and take) to the server to retrieve only the current page’s records, minimizing both memory usage and network load.

 

For a comprehensive guide on grid performance optimization, we recommend reviewing the React Grid Performance Best Practices documentation - Performance Best Practices

 

Since you are noticing that templates seem to be processed for all 200 records instead of just the 50 visible on the current page, we would like to gather more information to help us provide the best possible guidance. Could you please clarify the following:

 

• Please share the complete configuration of your grid, including any custom templates and event handlers used. This will help us review the implementation of your template logic and determine whether it involves any complex or conditional rendering.
• Are the templates implemented using column.template, queryCellInfo, or rowDataBound?
• Is your Grid using local data or remote data? If you are using remote data, kindly specify which adaptor is being used (e.g., UrlAdaptor, WebApiAdaptor, ODataAdaptor, etc.) and share the code information about how you are handled the the server-side data fetching (e.g., are skip and take used properly)?
   

This information will help us better understand your scenario and offer the most effective solution.

 

Regards,

Kishore Muthukrishnan