search

mui / base-ui

Base UI is an open-source library of accessible, unstyled UI components for React.
MIT License
294 stars 47 forks source link

[collapsible] Support`keepMounted` prop #728

Open mj12albert opened 1 month ago

mj12albert commented 1 month ago

Follow up to https://github.com/mui/base-ui/pull/577#pullrequestreview-2345745521

Do we have an API to not mount the children of an accordion? Something similar to https://mui.com/material-ui/react-accordion/#performance. When rendering heavy components under an accordion, e.g. in a dashboard: charts, data grid, etc. It can be a lifesaver for the performance responsiveness on the page.

Or is the idea to solve this problem with a new component of this kind: https://ark-ui.com/react/docs/utilities/presence?

colmtuite commented 1 month ago

This seems back-to-front to me. Wouldn't it be better—and more in-line with our other components—if the panel contents unmounted by default, and then you can use the keepMounted prop if you need it?

cc @michaldudak

michaldudak commented 1 month ago

I'd name the prop keepMounted for sure. As for its default value, I don't have a strong opinion, but I lean towards making it consistent with other components (so false).

mj12albert commented 1 month ago

@colmtuite I agree with naming this as keepMounted instead

I think it makes sense for the default for this to be true, because generally browsers implement the behavior of the hidden attribute with CSS display: none, which doesn't remove the Panel (and contents) from the DOM

And for other components, keepMounted is needed for animations using Framer; while for Collapsible, it would be for performance, e.g. if you have a lot of Collapsibles with heavy components in the Panel as @oliviertassinari mentioned, what do you think?