[RichTreeViewPro] dataSource does not re-fetch root items when getTreeItems callback changes

[DomSeFutNe]

Steps to reproduce

Description When using RichTreeViewPro with a dataSource, changing the dependencies of the getTreeItems callback (e.g., updating a search query parameter) does not trigger a re-fetch of the root items.

Even though the useCallback hook recreates the function reference, the Tree View persists the old root state. The new parameters are only applied when expanding a node to fetch its children, but the root list remains stale.

Steps to Reproduce:

1. Create a basic RichTreeView (or RichTreeViewPro).
2. Apply a dataSource utilizing a lazy-query (e.g., from Redux Toolkit).
3. Add an input field (e.g., a search bar) that controls a state variable used as a parameter in the API call.
4. Pass this parameter into the getTreeItems callback via useCallback dependencies.
5. Change the input value to trigger a change in the parameters.

Current behavior

Nothing happens to the root list when the query parameters change. The Tree View does not react to the updated getTreeItems reference. The new parameters are only effective if I expand an item to fetch its children; the root items remain unchanged.

Expected behavior

The list should regenerate and restart fetching from the beginning (root level) using the new parameters.

Context

Here is the code to reproduce the problem:

// Note: I have omitted the redux-query API definition.
// Assume the call accepts params like "search".
// The response is a non-paginated array of items.

const useHookTree = () => {
    const [search, setSearch] = React.useState<string | null>(null);
    const [fetch] = useLazyQuery();

    // The response directly matches the schema needed for the rich-tree-view
    const getTreeItems = useCallback(async (parent?: string) => {
        return await fetch({ parent, search }).unwrap();
    }, [search, fetch]);

    return getTreeItems;
};

const Tree = () => {
    const getTreeItems = useHookTree();
    // Note: Creating cache instance with 0 cache time as rtk handles the cached values.
    const dataSourceCache = new DataSourceCacheDefault({ ttl: 0 });

    return (
        <RichTreeViewPro
            items={[]}
            dataSource={{
                getTreeItems,
                getChildrenCount: (i) => i.children as number
            }}
            dataSourceCache={dataSourceCache}
        />
    );
};

Possible Solution: Consider adding a params key to the dataSource configuration object. The library could observe this key for changes to trigger updates. These parameters could then be passed as arguments to getTreeItems.

Proposed Signature: getTreeItems = (parentId?: string, params?: Record<string, string | number | boolean>) => ...

Your environment

npx @mui/envinfo

I tried on multiple browsers. Crome, Firefox and Edge.

  System:
    OS: Linux 6.6 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
  Binaries:
    Node: 24.11.1 - /usr/bin/node
    npm: 11.6.2 - /usr/bin/npm
    pnpm: 10.22.0 - /usr/bin/pnpm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: 11.14.0 => 11.14.0 
    @emotion/styled: 11.14.0 => 11.14.0 
    @mui/base: 5.0.0-alpha.82 => 5.0.0-alpha.82 
    @mui/codemod: ^5.8.1 => 5.15.14 
    @mui/icons-material: ^5.11.0 => 5.18.0 
    @mui/lab: 5.0.0-alpha.83 => 5.0.0-alpha.83 
    @mui/material: ^5.15.14 => 5.18.0 
    @mui/styled-engine: ^6.4.0 => 6.5.0 
    @mui/system: ^5.8.1 => 5.18.0 
    @mui/types: ^7.1.3 => 7.4.4 
    @mui/utils: ^5.17.1 => 5.17.1 
    @mui/x-charts-pro: ^8.7.0 => 8.8.0 
    @mui/x-data-grid-generator: ^7.22.0 => 7.29.8 
    @mui/x-data-grid-pro: ^7.23.0 => 7.29.8 
    @mui/x-date-pickers: ^5.0.0-alpha.4 => 5.0.20 
    @mui/x-date-pickers-pro: ^8.3.0 => 8.8.0 
    @mui/x-license: ^7.23.2 => 7.29.1 
    @mui/x-tree-view: ^8.19.0 => 8.19.0 
    @mui/x-tree-view-pro: 8.14.1 => 8.14.1 
    @types/react: 18.3.1 => 18.3.1 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    styled-components: ^6.1.17 => 6.1.19 
    typescript: 5.5.4 => 5.5.4

Search keywords: bug, RichTreeViewPro, TreeView, dataSource, lazy-loading, reactivity, stale-data, getTreeItems not updating, dataSource callback dependency, root items not refetching, lazy query params update, useCallback reactivity issue, dataSourceCache invalidation

Order ID: 106607

[DomSeFutNe]

Additional information: I also tried it with dataSource = useMemo, with the same behavior.

[DomSeFutNe]

I found a workaround. But it is not the solution. When i trigger a remount of the RichTreeViewPro, it refetches.

[newdisease]

I have the same problem with the RTK query. It would be great to have it fixed.

[flaviendelangle]

@noraleonte is having a look at the issue 👍

[DomSeFutNe]

@flaviendelangle Thank you for your prompt reply. Could you please add the tag “pro-plan”? My supervisor gave me the order number. I have included it in the report.

[noraleonte]

Hey 👋 I think reloading the tree should be possible by calling the updateItemChildren API method with null as an arg (load the children of the root aka the whole tree)

I opened the PR for fixing the typing, as it's not currently accepting null. From what I see, this should solve the problem, but if you have a more specific problem or require a different solution, I'm happy to take a look 👍

[DomSeFutNe]

Hey @noraleonte Thank you for the suggestion. I was thinking along the same lines. It seems the documentation is indeed unclear regarding NULL arguments. I will test this after the PR was merged and let you know the result.