[tree view] RichTreeViewPro with lazy-loading doesn't re-render (update) when items change.

[gentrith44belt]

Steps to reproduce

Steps:

1. Open this link to live example: (required)
2. Click update button (it updates react query data cache)
3. Observe, nothing happens.

Current behavior

On data source change, the tree is not re-rendered

Expected behavior

On data source change, it should update items

Context

I have this RichTreeViewPro component where I lazy-load items from backend (with react query). The problem is that I need to do updates (for root items) and show/hide them real time from the tree-view.

The problem is that when I change the data in the backend and refetch the root items, the treeview doesn't re-render.
Maybe this is expected behavior for performance issues, but I dont understand how is this supposed to work.
For example with Data Grid even for lazy loading you can refetch the data and it re renders, but in this example I cannot find a solution, except providing a key={treeViewKey} and updating it everytime the data changes (force re-render)

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: RichTreeViewPro, re-render

Order ID: 108277

[monbelt]

+1

[amorinabelt]

+1

[mirlindbelt]

+1

[gentrit-humolli]

+1

[flaviendelangle]

Hi,

Could you please provide the equivalent example with the Data Grid, to make sure I understand your approach and the behavior differences between the two?

We should be able to improve this behavior. The Tree View lazy loading is young and probably missing a lot of use cases 👍

[gentrith44belt]

hi @flaviendelangle, im having issues running data-grid examples in codesandbox due to some bundling issues.
But I can explain the issue in more details and the fix that is needed.

So basically if you lazy-load items in the TreeView (for example using React Query) and then you add a new item, the item doesnt show on the list.

This is a quick code exmaple.

function Sidebar() {
	const rootItems = useFetchRootItems(); // [{id: '1', label: 'Root 1', childrenCount: 10}, {id: '2', label: 'Root 2', childrenCount: 20}]

	const fetchChildren = async (parentId?: TreeViewItemId) => {
		if (!parentId) {
			return [];
		}
		const childrenItems = await queryClient.fetchQuery({
			queryKey: ["children", parentId],
			queryFn: () => getChildrenFromParentId(parentId),
		});

		return childrenItems;
	};

	return (
		<>
			<RichTreeViewPro
				items={rootItems}
				dataSource={{
					getChildrenCount: (item) => item.childrenCount as number,
					getTreeItems: fetchChildren,
				}}
			/>

			<AddNewItem />
		</>
	);
}

function AddNewItem() {
	return (
		<button
			onClick={() => {
				// add new item to backend
				// invalidate useFetchRootItems
				// the root item list is invalidated
				// the item does not show in the tree view
			}}>
			add new root item
		</button>
	);
}

[flaviendelangle]

I get the issue with the Tree View
I'm more surprised to see that you don't get the same behavior on the Data Grid