Box: Slow Performance

[cwagner22]

I'm experiencing slow performance using Material UI's Box component. I have a collection of objects that I'm rendering (around 100) using multiple Box for each of them. However, it's slow and I've realized that the more I'm adding Boxes the worst it gets. Here is a codesandbox link to reproduce the issue.
With 200 items, just using Box takes around 1.8s to render.
And if using div instead of Box like here, it's instant.

Is there any way I can get increase the performance? I like the convenience of Box...

[eps1lon]

I wouldn't recommend the Box without any props. It's for quick prototyping for design systems not a

replacement. See #21657 for more context.

[cwagner22]

Well I’m using props which is why I would like to keep Box instead of div. This was just a quick example to demonstrate.

[mbret]

We recently encoutered that issue too. We were using Box as a drop in replace for div. Seemed the right way based on the documentation and its a pretty convenient component for quick styling. App was weirdly slow but well we decided to check that later because of other priorities. Then we implemented the main list view. With just ~50 items it takes 1s to render, when having ~100 items, it takes 2s to render. This grows linearly with the number of items (until we reach our list recycle frame threshold). Since we are using recycled list, this is not a list problem and it worked perfectly during prototypes. This is also with PROD build. During development you can multiply the time to render by 3..

Point is that the app were completely unusable with barely nothing displayed on it. We then decided to replace every single Box with its div equivalent and the app is now blazing fast everywhere. The list renders instantly no matter the number of items.

At this point I am not sure why Box is slow like this but it looks like nobody should use it at all. I am a bit confused about the use case for it now.

[oliviertassinari]

See #21657 (comment), the performance issue is largely solved in v5, at least it's x3-x5 faster now.

https://next--material-ui.netlify.app/branding/about/ is largely implemented with it, and it seems fast enough.

[oliviertassinari]

I'm locking as this issue is a duplicate of #21657