Skip to content

[tree view] Use useId for the default tree id - #23341

Merged
noraleonte merged 1 commit into
mui:masterfrom
Anexus5919:fix/tree-view-default-id-use-id
Aug 26, 2026
Merged

noraleonte merged 1 commit into
mui:masterfrom
Anexus5919:fix/tree-view-default-id-use-id

Conversation

@Anexus5919

@Anexus5919 Anexus5919 commented Aug 14, 2026 •

Copy link
Copy Markdown
Contributor

Split out of #23337 at @noraleonte's request.

Changes

treeId starts as undefined and is only generated by the first updateStateFromParameters, which runs in a layout effect after mount. Until then treeItemIdAttribute resolves to -<itemId>, so:

  • two Tree Views on the same page emit the same item ids in the server output and in the first client render
  • every item re-renders right after mount when the real id arrives

The default id now comes from useId and is passed to the store through the parameters, the same way isRtl already is. It is stable from the first render, unique per instance, and consistent between server and client. createTreeViewDefaultId and its module-global counter are gone.

useId is @mui/utils/useId, which is what the Data Grid uses. It delegates to React's useId on React 18+, and falls back to a post-mount id on React 17, which matches the current behaviour there.

No public API change.

Changelog

No public API change. The generated id attribute on the root and on each Tree Item
changes format (mui-tree-view-<n>-<itemId> → <useId>-<itemId>); it was never a
public contract and was already non-deterministic, but hardcoded selectors need updating.

@code-infra-dashboard

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-23341--material-ui-x.netlify.app/
QR code for https://deploy-preview-23341--material-ui-x.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 🔺+167B(+0.24%) 🔺+64B(+0.31%)
@mui/x-tree-view-pro 🔺+167B(+0.12%) 🔺+51B(+0.13%)
@mui/x-scheduler 🔺+171B(+0.04%) 🔺+58B(+0.06%)
@mui/x-scheduler-premium 🔺+171B(+0.03%) 🔺+56B(+0.04%)
@mui/x-chat 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@zannager zannager added the scope: tree view Changes related to the tree view. This includes TreeView, TreeItem. label Aug 18, 2026
@Anexus5919

Copy link
Copy Markdown
Contributor Author

@michelengelen @noraleonte Kindly have a review on this pr. Thanks!

@noraleonte noraleonte left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎉 Thanks for looking into this 🙏

@noraleonte noraleonte added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Aug 26, 2026
@noraleonte
noraleonte merged commit 7df9130 into mui:master Aug 26, 2026
24 of 26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: tree view Changes related to the tree view. This includes TreeView, TreeItem. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants