[data grid] Time spend rendering Emotion/Pigment CSS

[oliviertassinari]

Summary

This is a continuation of #11866 (comment) point 2. A significant amount of time is spent rendering React components, more specifically in the styled layer. We should be able to do better.

The potential savings might be about 14% (100ms out of the 700ms).

Examples

Shouldn't this be memo?

mui-x/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx

Line 158 in 7c4ba74

export { GridVirtualScrollbar };

[romgrk]

I've been putting off working on the performance of the styles because I was hoping to solve this cleanly with the style API improvements and PigmentCSS. Doing that would take some amount of time though, we should probably estimate & prioritize the issue in that case.

We could also just hack around the problem by cramming more styles into GridRootStyles.

That component should probably by memo (as every component should), but I haven't seen it show up in any profile yet so I haven't paid attention to it. Usually the rows/cells take up so much of the time that it doesn't make sense to pay much attention to anything else for the moment.

[oliviertassinari]

@romgrk delaying work on this makes sense to me 👍 , I opened the issue to have a placeholder for this.