Avoid calling onItemsLazyLoaded multiple times

Author: flaviendelangle

packages/x-tree-view-pro/src/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.test.tsx

@@ -252,6 +252,18 @@ describeTreeView<RichTreeViewProStore<any, any>>(
 
       it('should pre-cache inline nested children so expanding them requires no extra fetch', async () => {
         let fetchCount = 0;
+        let view: ReturnType<typeof render>;
+        const onItemsLazyLoaded = spy((items, _parentId) => {
+          items.forEach((item) => {
+            if (item.children && item.children.length > 0) {
+              view.apiRef.current.setItemExpansion({
+                event: {} as any,
+                itemId: item.id,
+                shouldBeExpanded: true,
+              });
+            }
+          });
+        });
         const fetchDataWithNested = async (parentId?: string): Promise<ItemType[]> => {
           fetchCount += 1;
           return new Promise((resolve) => {
@@ -271,23 +283,13 @@ describeTreeView<RichTreeViewProStore<any, any>>(
           });
         };
 
-        const view = render({
+        view = render({
           items: [{ id: '1', childrenCount: 1 }],
           dataSource: {
             getChildrenCount: (item) => item?.childrenCount as number,
             getTreeItems: fetchDataWithNested,
           },
-          onItemsLazyLoaded: (items, _parentId) => {
-            items.forEach((item) => {
-              if (item.children && item.children.length > 0) {
-                view.apiRef.current.setItemExpansion({
-                  event: {} as any,
-                  itemId: item.id,
-                  shouldBeExpanded: true,
-                });
-              }
-            });
-          },
+          onItemsLazyLoaded,
         });
 
         const fetchCountBefore = fetchCount;
@@ -298,6 +300,8 @@ describeTreeView<RichTreeViewProStore<any, any>>(
         expect(fetchCount - fetchCountBefore).to.equal(1);
         expect(view.isItemExpanded('1-1')).to.equal(true);
         expect(view.getAllTreeItemIds()).to.deep.equal(['1', '1-1', '1-1-1']);
+        // onItemsLazyLoaded should fire exactly once — not cascade for auto-expanded children
+        expect(onItemsLazyLoaded.callCount).to.equal(1);
       });
     });
 

packages/x-tree-view-pro/src/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.ts

@@ -25,6 +25,8 @@ export class TreeViewLazyLoadingPlugin<R extends TreeViewValidItem<R>> {
 
   private cache: DataSourceCache<R>;
 
+  private isInsideOnItemsLazyLoaded = false;
+
   constructor(store: RichTreeViewProStore<R, any>) {
     this.store = store;
     this.cache = store.parameters.dataSourceCache ?? new DataSourceCacheDefault<R>({});
@@ -147,6 +149,18 @@ export class TreeViewLazyLoadingPlugin<R extends TreeViewValidItem<R>> {
     this.store.set('lazyLoadedItems', { ...this.store.state.lazyLoadedItems, errors });
   };
 
+  private callOnItemsLazyLoaded(items: R[], parentId: TreeViewItemId | null) {
+    if (this.isInsideOnItemsLazyLoaded) {
+      return;
+    }
+    this.isInsideOnItemsLazyLoaded = true;
+    try {
+      this.store.parameters.onItemsLazyLoaded?.(items, parentId);
+    } finally {
+      this.isInsideOnItemsLazyLoaded = false;
+    }
+  }
+
   public buildPublicAPI = () => {
     return {
       updateItemChildren: this.updateItemChildren,
@@ -237,7 +251,7 @@ export class TreeViewLazyLoadingPlugin<R extends TreeViewValidItem<R>> {
         }
         this.store.items.setItemChildren({ items: cachedData, parentId: itemId, getChildrenCount });
         this.setItemLoading(itemId, false);
-        this.store.parameters.onItemsLazyLoaded?.(cachedData, itemId);
+        this.callOnItemsLazyLoaded(cachedData, itemId);
         return;
       }
 
@@ -269,7 +283,7 @@ export class TreeViewLazyLoadingPlugin<R extends TreeViewValidItem<R>> {
       // pre-cache any inline nested children so expanding them requires no extra network call
       this.processNestedItemChildren(response);
       // notify the user that new items have been loaded
-      this.store.parameters.onItemsLazyLoaded?.(response, itemId);
+      this.callOnItemsLazyLoaded(response, itemId);
     } catch (error) {
       const childrenFetchError = error as Error;
       // set the item error in the state