We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to render only visible items?

I am using TreeViewComponent in a project. I have a large number of parent items (1300+). This large list is causing slow rendering in my app. How to render only the items visible on viewport (like react-virtualized or react-window) using TreeView?

P.S: package I am using "@syncfusion/ej2-react-navigations": "20.2.43" with react v16.14.0

3 Replies

LD LeoLavanya Dhanaraj Syncfusion Team March 24, 2023 01:43 PM UTC

Hi Azadur,

Greetings from Syncfusion support.

From your shared details, we understand that you are facing a performance issue while rendering a larger amount of data in the React TreeView component.

We'd like to point out that TreeView by default employs load on demand (lazy load), which reduces bandwidth size when consuming large amounts of data. It loads first-level nodes initially, and when the parent node is expanded, it loads the child nodes based on the parentID/child member. By default, loadOnDemand is set to true. When this property is false, all the tree nodes are rendered at the beginning itself. So, we suspect this is the main cause of the performance issue.

So, follow our suggested solution at your end and get back to us if you need any further assistance.  


Leo Lavanya Dhanaraj

SA Sk Azadur Rahman March 27, 2023 06:46 AM UTC

Hello Leo,

Thank you for your response. I guess I wasn't able to convey my message properly or I am not getting yours :)

I have 1000+ items which are first level items. I don't have child levels and I am not providing loadOnDemand props (which in result should use default value). All the first level items are present in DOM (check attached image) which slows down browser paint job. As a result app is lagging.

How can I get rid off first level elements those are not visible in the viewport for faster rendering.

Sk. Azadur Rahman

Screenshot 2023-03-27 at 12.21.03 PM.jpg

LD LeoLavanya Dhanaraj Syncfusion Team March 28, 2023 09:40 AM UTC

Hi Azadur,

Thanks for the shared details.

As of now, we have loadOnDemand(lazy loading) support in the TreeView component. However, to resolve the performance issue on large data sets, we have already planned to provide Virtualization support in the TreeView component. This feature will be included in any one of our upcoming releases. Generally, we will plan features based on customer count, feature rank, and wish list plan.

You can track the below link to know the status of this feature.


Live Chat Icon For mobile
Up arrow icon