1. Home
  2. Forum
  3. React - EJ 2
  4. Efficient way to implement infinite scroll

Efficient way to implement infinite scroll

In our setup we're managing data fetching using `useInfiniteQuery` from @tanstack/react-query. Fetching next page is done on user clicking a button. We then pass the fetched data to `GanttComponent` `dataSource` prop. The data has two level of nesting, so there are parent rows which have child rows. In the beginning all parent rows are collapsed. The data is prepared in hierarchical structure with all children passed to `GanttComponent` even though they are initially collapsed.

Unfortunately loading next page causes performance issues and we suspect the reason is the number of rows (event though the majority of them - children, are collapsed). Is there a better way of handling the situation that allows us to keep managing the data fetching through @tanstack/react-query?


5 Replies
SJ Sridharan Jayabalan Syncfusion Team June 18, 2025 12:54 PM UTC

Hi Joanna,

 

Greetings from Syncfusion.

 

For your query, we would like to inform you that our Gantt Chart currently does not support infinite scrolling. We assume that you're attempting to manually implement infinite scrolling using the useInfiniteQuery hook from @tanstack/react-query. However, you are experiencing performance issues when dynamically updating the dataSource.

 

When the dataSource property is updated dynamically, the Gantt Chart component will re-render and perform several internal validations such as date validations, handling holidays and weekends, rendering timeline cells, maintaining parent-child relationships, and validating task dependencies. Therefore, as the number of records fetched and assigned to the dataSource increases, performance may be impacted.

 

Refer to the following documentation to learn how to improve the performance of the Gantt Chart component:

 

Regards,

Sridharan


JD Joanna Dyczka June 18, 2025 03:46 PM UTC

Hi Sridharan,

Your assumption is correct. Thank you for providing the link to the performance tips. However, I don't really like Row Virtualization since the user has to wait for data to be rendered every time they scroll. In contrast, with our current setup, when the data is already loaded everything runs smoothly. It's just the moment of rendering the data and performing those internal validations that takes longer and longer with every next page as the number of rows is getting larger.

I think the perfect solution would be to not render child rows initially, since they are collapsed. The problem is that, as I understand it, Load On Demand only works with DataManger and I'm looking for a solution that would enable us to keep using react-query for fetching data. The reason for that is that GanttChart is only one form of presenting the data so the API endpoint is shared for different views.

Regards,
Joanna 


SJ Sridharan Jayabalan Syncfusion Team June 19, 2025 12:44 PM UTC

Joanna,


Thank you for the detailed explanation.

 

We fully understand your requirement that "Using useInfiniteQuery from @tanstack/react-query to fetch data on button clicks, and you want to continue this setup while improving performance without using row virtualization or DataManager".

 

From your description, it seems you're currently updating the dataSource by appending the newly fetched data to the existing dataset. While this works functionally, it results in growing the dataSource size (e.g., from 1000 to 2000 and so on), which in turn causes performance degradation during Gantt’s internal rendering and validations.

 

To improve performance while preserving your setup, we recommend a manual paging approach:

 

  • Instead of appending the newly fetched data, replace the existing dataSource entirely with the newly fetched set.
  • Fetch the next set of data while clicking the “Next” button.
  • Similarly, implement a “Previous” button to fetch the earlier dataset.
  • By replacing the dataSource on each navigation instead of growing it, the component will render and validate only a manageable chunk of data (e.g., 500 records at a time), resulting in a significantly smoother experience.

 

This approach effectively simulates manual paging and avoids the performance impact of a growing data set while still allowing you to use your shared API with React Query.

 

As for "Infinite scrolling support", we’re actively considering for future versions of the Gantt component. We encourage you to upvote and follow the below feedback link to stay updated on its progress:

 

 

Regards,

Sridharan


VB Viller blender February 21, 2026 11:06 AM UTC

Yes, the performance issue is most likely caused by rendering and passing a large hierarchical dataset to the GanttComponent even when most child rows are collapsed. A better approach is to combine your existing useInfiniteQuery data fetching with virtualization or windowing techniques so that only the visible portion of rows is rendered at any time, rather than loading all children into the dataSource. You can use virtualization libraries such as react-window style solutions inside your Gantt component or filter the dataset so collapsed parent rows do not include their children until expanded (lazy-load children when a parent is opened). Also consider memoizing prepared hierarchical data and avoiding unnecessary restructuring on every fetch. For example, you can keep fetching pages normally but render something like n o cream chargers as a sample text while testing layout behavior, ensuring that infinite scroll loads data smoothly without rendering performance bottlenecks.



AG Ajithkumar Gopalakrishnan Syncfusion Team February 23, 2026 11:06 AM UTC

Hi Viller 

Thank you for sharing your suggestion we appreciate the detailed analysis.

You are correct that rendering a large hierarchical dataset can affect Gantt performance, especially when many child rows remain collapsed. Approaches such as virtualization/windowing, lazy‑loading children on expand, and memoizing the dataset would indeed help reduce rendering overhead in theory.

However, at the moment the Syncfusion Gantt component does not provide built‑in support for:

Because these features are not yet available, implementing full virtualization or true lazy loading at the Gantt level is not currently possible using the official API.

For now, we can only explore workarounds such as:

  • Reducing the amount of data passed to the Gantt at once
  • Loading children manually when the user expands a node
  • Avoiding unnecessary transformations or rerenders of the dataset

We will keep monitoring the above feature requests. Once Syncfusion adds native support, we will be able to integrate infinite scrolling and proper lazy‑loading into our implementation.

Thanks again for the suggestion it’s very helpful, and we’ll revisit this once official support is available.

Regards,
Ajithkumar G


Loader.
Up arrow icon